Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: Dropzone
Next: Image Zoom

Image Crop

Image cropping interface with aspect ratio locking for React

Drag to position, resize handles to adjust. Lock aspect ratio for avatars or thumbnails. The onCrop callback gives you a PNG data URL. If the result exceeds maxImageSize, it scales down automatically. Great for profile photo editors or image uploads.

Image Crop preview

Scroll to load preview

Installation

Dropzone

File upload zone

Image Zoom

Click-to-zoom

Comparison

Before/after slider

FAQ

Was this page helpful?

Sign in to leave feedback.

Dropzone

Drag-and-drop file upload zone with validation for React

Image Zoom

Click-to-zoom image viewer with blurred backdrop for React