ns-ui
Image Crop Mat
Image cropping as a passe-partout — four mat boards slide over a photo to define the crop window, snap to ratio presets with a settle, and show a rule-of-thirds grid only while dragging.
Use when cropping an image by sliding four physical mat boards over it, snapping to ratio presets with a settle and showing thirds guides only while dragging, so the crop reads as framing rather than as a dashed selection rectangle; it is the wrong choice for comparing two images against each other (compare-crack-seam) and for panning a large canvas inside a viewport (minimap-pantograph).
Install
npx shadcn add https://design.helpmarq.com- image
- crop
- photo
- editor
- gesture
- accessibility
ns-ui / image-crop-mat
1440 x 880 — Free
Drag a mat edge or corner to define the crop; a rule-of-thirds grid appears only while dragging. Ratio presets snap the mats to a settle.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| onChange? | (rect: CropRect) => void | — | — |
| className? | string | — | — |