Image Cropper

Crop and transform images.

Installation


pnpm dlx shadcn@latest add @shark/image-cropper


ImageCropper
├── ImageCropperImage
├── ImageCropperSelection
├── ImageCropperHandle
└── ImageCropperGrid


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`	-