Image Cropper

Crop images with zoom, rotation, and aspect ratio.

Installation


pnpm dlx shadcn@latest add https://shark.vini.one/r/image-cropper.json


import {
  ImageCropper,
  ImageCropperImage,
  ImageCropperSelection,
} from "@/components/ui/image-cropper";


<ImageCropper>
  <ImageCropperImage alt="Crop me" src="/image.jpg" />
  <ImageCropperSelection />
</ImageCropper>

Use the aspectRatio to lock the crop area to a specific aspect ratio.

Use cropShape="circle" for profile pictures or avatars.

Start with a pre-defined crop area using the initialCrop prop.

Control zoom programmatically with the zoom and onZoomChange props.

Set minZoom and maxZoom to constrain how far users can zoom.

Constrain the crop area size with minWidth, minHeight, maxWidth, and maxHeight.

Set fixedCropArea to true when the crop area should stay fixed while the image moves underneath.

Root wrapper. Manages crop state and handles.

Prop	Type	Default
`aspectRatio`	`number`	-
`cropShape`	`'circle' \| 'rectangle'`	`'rectangle'`
`fixedCropArea`	`boolean`	`false`
`initialCrop`	`{ x: number; y: number; width: number; height: number }`	-
`maxHeight`	`number`	`Infinity`
`maxWidth`	`number`	`Infinity`
`maxZoom`	`number`	`5`
`minHeight`	`number`	`40`
`minWidth`	`number`	`40`
`minZoom`	`number`	`1`
`onCropChange`	`(details: CropChangeDetails) => void`	-
`onZoomChange`	`(details: ZoomChangeDetails) => void`	-
`rotation`	`number`	-
`zoom`	`number`	-
`className`	`string`	-

Image to crop. Pass src and alt.

Crop selection overlay with resize handles and optional grid.

For a complete list of props, see the Ark UI documentation.

On This Page