Make your AI a shadcn expert

Image Crop

Image cropping interface with aspect ratio locking for React

Image Crop preview

Scroll to load preview

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.

Install with AI

If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this component for you — no copy-paste, no CLI:

use shadcnio to install the image-crop component into my project

FAQ

Was this page helpful?

Sign in to leave feedback.