## Avatar Upload (S—097)

A round avatar you click or drop an image on, then zoom and drag to frame it before saving.

- URL: https://sundaeui.dev/components/avatar-upload
- Category: Forms & inputs · 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/avatar-upload.json`
- Tags: upload, zoom, avatar, image, profile, crop

Empty, it shows initials and a camera badge. Choose or drop an image and it loads into the circle; a zoom slider and drag let you frame the face, and Save locks it in.
Remove returns to initials. Everything happens locally with an object URL; upload the result from onChange.

### Usage

```tsx
import { AvatarUpload } from '@/components/sundae/avatar-upload'

<AvatarUpload />
```

### Props

- `initials` (`string`, required): Shown when empty.
- `onChange` (`(file: File | null, frame: { zoom: number; x: number; y: number }) => void`): Called on save or remove.
- `size` (`number`, default `112`): Diameter in px.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Profile and workspace settings, onboarding.

### When not to use

- Full image editing: use a dedicated cropper.

### Accessibility

- The avatar is a button that opens the file picker; drag-and-drop is an enhancement.
- Zoom is a labelled range input; arrow keys on the image nudge the frame.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- Enter / Space: Choose image
- Arrows (on image): Nudge framing