# Avatar Upload

A profile photo with drop, progress, replace and clear errors, or a sample face.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/avatar-upload
```

## Usage

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

export function Example() {
  return <AvatarUpload upload={send} onChange={save} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| maxMb | number | 5 |
| accept | string | image/png,image/jpeg,image/webp |
| upload | (file, report, signal) => Promise | simulated |
| onChange | (value) => void |  |
| samples | AvatarPerson[] | all four |
| title, hint | string |  |
| initial | Upload state | empty |
| animated | boolean | true |

## When to use

- In profile settings.

## When not to use

- For general files: use Attachment.

## Accessibility

- The dashed avatar is a labelled button.
- Progress is announced politely, errors as alerts.
- The reason for an error is in the text, not only the ring.

## Motion

- The card outlines in 150 ms on drag over, and the photo previews under its progress ring.
- The progress ring follows the upload.
- With reduced motion, the outline and ring change at once.