Project · 2025

Image Cropper

A ShadcnUI-registry React component for uploading and cropping images with drag-and-drop and configurable aspect ratios.

Screenshot of Image Cropper

About this project

Image Cropper is a reusable React image-crop component distributed through a custom ShadcnUI registry. Developers install the full source code into their project with a single CLI command (pnpm, npm, yarn, or bun all work) instead of adding another black-box dependency, which means the component is theirs to modify.

The component handles image selection via drag-and-drop or file browsing, then presents an interactive cropping interface built on react-easy-crop. It is configured through props: aspectRatio for 16:9, 1:1 and friends, fileLimitMB for upload constraints, and an onCropComplete callback that returns the cropped result.

Features

  • Installable via a custom ShadcnUI registry, full source ownership
  • Drag-and-drop or file-browse image selection
  • Configurable aspect ratios
  • File-size limits via a single prop
  • onCropComplete callback for the cropped output
  • Works with pnpm, npm, yarn, and bun