shadcn.io is not affiliated with official shadcn/ui
Image Crop Dialog Block for Solid
A profile page with its cover-crop dialog shown open: a drawn landscape in an image cropper with shape, zoom, turn and reset controls, and the same crop shown live as an avatar, a card thumbnail and a banner strip.
Installation
Overview
Crop once and see where it will be used, with this crop dialog for Solid with Ark UI. It opens from the Profile page of Coverloft, a cover-picture tool: the header holds an outline Edit cover Button, and the page, a cover band, a round avatar, a name and two cards, is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The Dialog holds the catalog Image Cropper over a drawn greyscale landscape: drag the frame, pull a handle, or focus it and use the arrow keys. A Toggle Group picks the shape (Square 1:1, Banner 3:1, Card 4:3 or Free), a Slider zooms from 1 to 3 times, two buttons turn the picture a quarter either way, and Reset puts everything back. Beside the cropper the same crop is shown as a 56 pixel round avatar, a card thumbnail and a banner strip, live, so a crop that works as a banner and fails as an avatar is seen before it is applied. Apply crop, the only Shine Button, puts the crop on the cover band behind the dialog. The picture is drawn, no file is read and nothing is uploaded. For preview the dialog is drawn open in place when the page loads; the header button opens the real Dialog.
FAQ
Why is the dialog already open, and what do I keep?
So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Edit cover button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same CropFields component and share the block's state, so a shape or a zoom chosen in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.
How do the three previews follow the crop?
readView reads the cropper's frame and the picture's own transform from the page whenever either changes, turns them into the picture's units, and each preview places the same picture so the crop covers its box: scaled, shifted and carrying the cropper's matrix, so a zoom or a quarter turn shows up in all three at once. A free crop is covered, not stretched, in the round and the square boxes. They are drawn from the picture, with no canvas and no file.
What does Apply crop do here, and how do I wire it up?
Here it stores the crop and shows it on the cover band of the drawn profile, closes the dialog and says in a polite status message that nothing was uploaded. The landscape is an SVG at module scope. In your app swap PICTURE for the person's file, read the cropped pixels from the cropper's own getCroppedImage or send the crop rectangle to your server, and update the band when it answers.
Is it accessible from the keyboard?
Yes. The crop frame is a focusable slider: the arrow keys nudge it, with Shift for bigger steps. The shapes are a toggle group, always with one pressed, the zoom is a slider named Zoom, and the turn and Reset buttons are named. The caption under the cropper says the shape in words, and one polite message reports the applied crop. The trigger is the Edit cover button wrapped in DialogTrigger with asChild, and the dialog is controlled with open and onOpenChange. Focus returns to Edit cover when the dialog closes.
Why does changing the shape reset the frame?
The cropper takes its ratio when it mounts, so a new shape remounts it with a fresh frame of that ratio, keeping the zoom and the turn. Free leaves the ratio out, so the handles resize any way you like. Reset remounts it too, and also returns the shape to Banner, the shape of the cover.
How does it look on a phone?
The copy shown on load docks to the foot of the page as a bottom sheet, its actions pinned at the bottom with Apply crop on top, and the cropper, the controls and the previews scroll above them, one column, the previews in a row under the controls. The real dialog keeps the Dialog's own phone layout: a sheet stuck to the bottom of the screen.