Browse components
Refine Frame
Crop frame with springy corner handles that magnetically snap to edges, thirds and center, with snap guides and a live pixel-size readout.
Installation
npx shadcn@latest add @glint-ui/refine-frameFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/refine-frame.json
Usage
import { RefineFrame } from "@/components/ui/refine-frame";
<RefineFrame src={url} naturalWidth={1600} naturalHeight={1000} onChange={setCrop} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| naturalWidth | number | 1600 | Real image width in px (readout units). |
| naturalHeight | number | 1000 | Real image height in px. |
| snap | boolean | true | Snap edges to image edges, thirds and center. |
| snapDistance | number | 10 | Snap distance in screen px. |
| minSize | number | 0.15 | Smallest crop as a fraction of the image side. |
| accent | string | "#a3e635" | Snap guide color. |
| src | ReactNode | — | Image URL. |
| onChange | ReactNode | — | (crop: { x, y, width, height }) => void, in image pixels. |
| className | string | — | Extra classes for the root element. |