Shadcn.io is not affiliated with official shadcn/ui
Dialog Image Crop
Image cropping dialog with aspect ratio selection, zoom control, rotation, and preview for avatar or thumbnail uploads
Crop and adjust images with intuitive controls. This React image crop dialog provides aspect ratio presets for common sizes like square, portrait, and landscape, zoom slider for precise cropping, rotation controls for orientation, real-time crop preview, and reset to original option. Built with shadcn/ui Dialog, Button, Slider, ToggleGroup, and Label components using Tailwind CSS, users prepare images exactly as needed. Select area, adjust zoom, apply crop—perfect for profile picture uploads, thumbnail creation, banner images, or any Next.js application requiring user-controlled image cropping before upload.
Related Components
React Dialog Block Media Upload
File uploads
React Dialog Block Image Preview
Image viewing
React Dialog Block Edit Profile
Profile editing
React Dialog Block Add Profile
Profile creation
React Dialog Block Avatar Upload
Avatar selection
React Dialog Block Success Confirmation
Crop complete
FAQ
Was this page helpful?
Sign in to leave feedback.