║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Image Crop description: A component that allows users to crop images with customizable aspect ratios and circular cropping options. icon: Crop dependencies:

• https://github.com/DominicTobias/react-image-crop installer: image-crop

---

Features

• Interactive image cropping with drag-and-resize functionality
• Support for custom aspect ratios or free-form cropping
• Circular crop mode for profile pictures and avatars
• Automatic image scaling and compression based on maximum file size
• Returns cropped image as PNG data URL for easy upload or display
• shadcn/ui variables for styling
• Responsive design that adapts to container size
• Built-in checkered background pattern for transparency preview
• TypeScript support with comprehensive type definitions
• Accessible controls and keyboard navigation support

Examples

Custom buttons

<Preview path="image-crop-custom" />

Circular crop

<Preview path="image-crop-circular" />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║