shadcn.io is not affiliated with official shadcn/ui

Shadcn Image Cropper for React Radix UI

Crop and transform images.

Radix UI does not include this primitive, so this page uses the Ark UI component. The visuals match the Ark UI version.

PreviewCode

Installation

bunx --bun shadcn@latest add https://kit.dev/r/radix/image-cropper.json

Anatomy

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

Usage

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

<ImageCropper className="aspect-video w-full max-w-lg">
  <ImageCropperImage
    alt="Crop me"
    src="https://images.unsplash.com/photo-1662692735672-544412d65934?w=600&auto=format"
  />
  <ImageCropperSelection />
</ImageCropper>

Demos

Aspect Ratio

PreviewCode

Circle Crop

PreviewCode

Controlled Zoom

PreviewCode

Fixed Crop Area

PreviewCode

Initial Crop

PreviewCode

Min Max Size

PreviewCode

Zoom Limits

PreviewCode

API Reference

ImageCropper

div

PropType

asChild?boolean

className?string

AttributeType

data-slot"image-cropper"

data-scope"image-cropper"

data-part"root"

aria-busystring

aria-controlsstring

aria-descriptionstring

aria-labelstring

aria-live"polite"

aria-roledescriptionstring

data-dragging?string

data-fixed?string

data-panning?string

data-pinch?string

data-shapestring

role"group"

CSS variableType

--color-whitestring

--crop-heightstring

--crop-widthstring

--crop-xstring

--crop-ystring

--image-offset-xstring

--image-offset-ystring

--image-rotationstring

--image-zoomstring

ImageCropperViewport

div

PropType

asChild?boolean

AttributeType

data-slot"image-cropper-viewport"

data-scope"image-cropper"

data-part"viewport"

data-disabled?string

data-ownedbystring

role"presentation"

CSS variableType

--color-whitestring

ImageCropperImage

img

PropType

asChild?boolean

className?string

AttributeType

data-slot"image-cropper-image"

data-scope"image-cropper"

data-part"image"

aria-hiddenboolean

data-flip-horizontal?string

data-flip-vertical?string

data-ownedbystring

data-ready?string

role"presentation"

ImageCropperSelection

div

PropType

axis?"horizontal" | "vertical" | "both"

asChild?boolean

className?string

AttributeType

data-slot"image-cropper-selection"

data-scope"image-cropper"

data-part"selection"

aria-descriptionstring

aria-labelstring

aria-roledescriptionstring

aria-valuemaxstring

aria-valueminstring

aria-valuenowstring

aria-valuetextstring

data-disabled?string

data-dragging?string

data-measured?string

data-panning?string

data-shapestring

role"slider"

CSS variableType

--cropper-accentstring

ImageCropperHandle

div

PropType

position"n" | "e" | "s" | "w" | "ne" | "se" | "sw" | "nw"

asChild?boolean

className?string

AttributeType

data-slot"image-cropper-handle"

data-scope"image-cropper"

data-part"handle"

aria-hidden"true"

data-disabled?string

data-positionstring

role"presentation"

CSS variableType

--cropper-accentstring

--cropper-handler-sizestring

--cropper-handler-widthstring

ImageCropperGrid

div

PropType

axis"horizontal" | "vertical"

asChild?boolean

className?string

AttributeType

data-slot"image-cropper-grid"

data-scope"image-cropper"

data-part"grid"

aria-hidden"true"

data-axisstring

data-dragging?string

data-panning?string

Installation

Anatomy

Usage

Demos

Aspect Ratio

Circle Crop

Controlled Zoom

Fixed Crop Area

Initial Crop

Min Max Size

Zoom Limits

API Reference

ImageCropper

ImageCropperViewport

ImageCropperImage

ImageCropperSelection

ImageCropperHandle

ImageCropperGrid

useImageCropper