Search blocks by description or jump to a page.
Static crop tool blueprint with a Placeholder canvas, rule of thirds grid, corner handles, aspect ratio chips, and apply and cancel actions.
The source for every Application block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? Log in
Image Crop Blueprint is a static open-state crop tool for hero-shot.jpg: a Placeholder canvas with a 70 % crop rectangle rendered in pure markup, complete with a two-pixel foreground border, a rule-of-thirds grid (two vertical and two horizontal lines at 33 % and 66 %), corner and mid-edge handles, and surrounding dim overlays. A floating readout pins the live dimensions (1680 x 1120 px) to the bottom of the canvas. Above the canvas, five aspect-ratio chips (Free, 1:1, 16:9, 4:3, 3:2) use aria-pressed, with Free active. Apply crop and Cancel sit in the footer.
Ratios are one array with an active flag driving the chip style. The whole block is zero-JS: no useState, no Radix, just markup that screenshots correctly in every preview context.
Reach for this block as the inline crop step in an image-upload or media-editing flow, replacing the Placeholder with your canvas element and wiring the Apply crop button to your crop handler.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the post-upload crop step. Other configurations:
Tip: show the pixel readout even in the static blueprint; it tells reviewers the crop preserves enough resolution before any JS is wired.