## Image Cropper (S—196)

Crop an image: drag the frame, pull a corner to resize, lock an aspect ratio, zoom, and read the exact output size.

- URL: https://sundaeui.dev/components/image-cropper
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/image-cropper.json`
- Tags: avatar, editor, image, aspect-ratio, resize, crop

The frame moves by dragging inside it and resizes from its corner; it never leaves the image. Aspect presets snap the frame and keep it locked while you resize.
Thirds lines appear while you drag. The footer reports the crop in source pixels, ready to send to your resizer.

### Usage

```tsx
import { ImageCropper } from '@/components/sundae/image-cropper'

<ImageCropper />
```

### Props

- `src` (`string`): Image URL (the demo draws an illustration).
- `width / height` (`number`, default `1200 / 800`): Source size in pixels.
- `aspect` (`'free' | number`, default `'free'`): Locked ratio.
- `onCrop` (`(r: { x; y; w; h }) => void`): Called with the crop in source pixels.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Avatars, cover images, product shots before upload.

### When not to use

- Full photo editing with rotation and filters.

### Accessibility

- The frame is a focusable group: arrows move it, Shift+arrows resize it.
- The output size is announced as it changes.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- Arrow keys: Move the frame
- Shift + arrows: Resize the frame