UploadCN
DocsComponentsExamples

Image Cropper

A crop, zoom, rotate and flip dialog that outputs a processed image file.

"use client"

import { ImageUpload } from "@/components/image-upload"

export default function ImageCropExample() {
  return (
    <ImageUpload
      crop={{ aspect: 16 / 9 }}
      compress
      maxWidth={1920}
      maxFiles={4}
    />
  )
}

Installation

npx shadcn@latest add @uploadcn/image-cropper

Usage

import { ImageCropper } from "@/components/ui/image-cropper"
import { useCropQueue } from "@/hooks/use-crop-queue"
const crops = useCropQueue()

<Upload adapter={adapter} accept="image/*" transform={crops.request}>
  …
</Upload>
<ImageCropper file={crops.current} aspect={1} onCrop={crops.complete} onCancel={crops.skip} />

The crop UI is react-easy-crop (touch, pinch, wheel and keyboard). Rendering uses transformImage from @uploadcn/core/image: EXIF orientation is applied and metadata is stripped. Install use-crop-queue to use it inside the upload pipeline.

Props

Prop

Type

On this page

InstallationUsageProps