KQ-590 · CROP/FRAME

Crop Frame

A crop frame that argues with its bounds. Dragging the frame or a corner fades in the rule-of-thirds grid and deepens the dim outside while the rect tracks the pointer 1:1; pushed past an edge the frame follows only a third of the way and springs home on glide. An aspect lock keeps the ratio, arrow keys nudge the frame and Shift and an arrow resize it, and x, y, width and height are four real sliders under the picture.

KQ-590 · CROP/FRAME

Gaugeworks · cover cropLocked 4:3

X180

Y120

W720

H540

Crop 720×540 at 180, 120

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/crop-frame

Props

image: { width: number; height: number; art: React.ReactNode }; default —; The picture in its own pixels; art fills the stage, which takes the same ratio.
aspect: number; default —; Width over height. Omit for a free crop; set, it survives every drag, key and slider.
value / defaultValue: { x: number; y: number; w: number; h: number }; default —; Controlled or initial crop rect in image pixels; defaults to a centred 70% crop.
onValueChange: (rect: CropRect) => void; default —; Fires with a rect that is always legal — clamped, on ratio, and inside the picture.

Prop	Type	Default	Description
image	{ width: number; height: number; art: React.ReactNode }	—	The picture in its own pixels; art fills the stage, which takes the same ratio.
aspect	number	—	Width over height. Omit for a free crop; set, it survives every drag, key and slider.
value / defaultValue	{ x: number; y: number; w: number; h: number }	—	Controlled or initial crop rect in image pixels; defaults to a centred 70% crop.
onValueChange	(rect: CropRect) => void	—	Fires with a rect that is always legal — clamped, on ratio, and inside the picture.