MiniDev UI

Image Cropper

React image cropper with drag to pan, wheel and pinch zoom, aspect presets, a circular avatar mask and 90 degree rotation that returns the crop in source pixels.

src/registry/ui/image-cropper.tsx/r/image-cropper.json

Installation#

bash
npx shadcn@latest add https://ui.minidev.pro/r/image-cropper.json

Usage#

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

export function Example() {
  return <ImageCropper />
}

API reference#

ImageCropper props
PropTypeDefault
srcstringSAMPLE_SRC
altstring"Lumen sample landscape"
aspectsAspect[]["1:1", "4:3", "16:9"]
defaultAspectAspect"4:3"
defaultCirclebooleanfalse
allowCirclebooleantrue
maxZoomnumber4
showPreviewbooleantrue
onCrop(rect: CropRect, info: { aspect: Aspect; circle: boolean }) => void-
fileNamestring"lumen-cover.png"
classNamestring-

Dependencies#

npm

lucide-reactmotion

Built from

ButtonSegmented ControlSlider

Related media components#

Audio PlayerMinimal React audio player row with a play and pause toggle, title, subtitle and an accessible progress bar. Controlled, so it works with any audio source.AvatarShadcn compatible avatar on Base UI with image and initials fallback, three sizes, a status badge and an overlapping avatar group with a plus count.CarouselScroll snap React carousel with previous and next buttons, arrow key support and a labelled region. Shows one, two or three slides by breakpoint, no library.File ListA stacked list of file rows showing each name and metadata such as size or date, with an optional download button per item. Good for React attachment lists.File RowA single file row with an icon, a truncated name, an optional meta line and a ghost download button with an accessible label. Styled with Tailwind.Image GalleryA responsive photo grid of square tiles, two columns on mobile and three on larger screens, each image cropped to fill. Built with React and Tailwind.
All media and upload components