Image Cropper | drift-ui

@drift-ui/image-cropperRegistry JSON GitHub Open in v0

100%

Keyboard

↑↓←→: Pan, hold Shift for larger steps
][: Zoom in or out
R: Rotate 90°
Enter: Apply the crop

The CLI also installs the npm packages and registry items it builds on, and reads the style in your components.json to pick the Base UI or Radix build.

image-cropper-usage.tsx

"use client"

import { useState } from "react"
import { ImageCropper } from "@/components/ui/image-cropper"

export function AvatarUpload() {
  const [blob, setBlob] = useState<Blob | null>(null)

  return (
    <ImageCropper
      src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200"
      aspect={1}
      cropShape="round"
      onCropComplete={(croppedBlob) => setBlob(croppedBlob)}
    />
  )
}

ImageCropper

An image cropping widget supporting pan, zoom, rotation, fixed aspect ratios, and Blob export.

Prop	Type	Default
`src`Required`string \| File \| Blob`Source image URL, File, or Blob.	`string \| File \| Blob`
`aspectnumber \| null`Default`1`Aspect ratio (width / height) such as 1 (square), 16/9 (widescreen), or 4/3 (photo).	`number \| null`	`1`
`cropShape"rect" \| "round"`Default`"rect"`Visual mask overlay shape. round displays a circular mask for avatars.	`"rect" \| "round"`	`"rect"`
`zoomnumber`Controlled zoom scale.	`number`
`defaultZoomnumber`Default`1`Initial zoom scale when uncontrolled.	`number`	`1`
`onZoomChange(zoom: number) => void`Called when zoom scale changes.	`(zoom: number) => void`
`minZoomnumber`Default`1`Minimum zoom scale.	`number`	`1`
`maxZoomnumber`Default`3`Maximum zoom scale.	`number`	`3`
`rotationnumber`Controlled rotation angle in degrees.	`number`
`defaultRotationnumber`Default`0`Initial rotation angle in degrees.	`number`	`0`
`onRotationChange(rotation: number) => void`Called when rotation angle changes.	`(rotation: number) => void`
`cropPoint`Controlled pan offset { x, y } in pixels.	`Point`
`defaultCropPoint`Default`{ x: 0, y: 0 }`Initial pan offset.	`Point`	`{ x: 0, y: 0 }`
`onCropChange(crop: Point) => void`Called when pan offset changes.	`(crop: Point) => void`
`onCropComplete(blob: Blob, pixelCrop: PixelCrop) => void`Called with the cropped image Blob and natural pixel crop dimensions when Apply is clicked or Enter is pressed.	`(blob: Blob, pixelCrop: PixelCrop) => void`
`onCropError(error: Error) => void`Called when image loading or canvas export fails.	`(error: Error) => void`
`outputType"image/png" \| "image/jpeg" \| "image/webp"`Default`"image/png"`MIME type for the generated Blob.	`"image/png" \| "image/jpeg" \| "image/webp"`	`"image/png"`
`outputQualitynumber`Default`0.92`Quality setting (0 to 1) for lossy formats.	`number`	`0.92`
`showControlsboolean`Default`true`Show zoom slider and rotate buttons below canvas.	`boolean`	`true`
`showGridboolean`Default`true`Show rule-of-thirds grid inside crop area.	`boolean`	`true`
`disabledboolean`Disables pan, zoom, and rotate interactions.	`boolean`