Image Crop
A component that allows users to crop images with customizable aspect ratios and circular cropping options.
Powered by
Installation
npx kibo-ui@latest add 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