# Avatar upload (goodtabs UI)

A round avatar preview with Change and Remove buttons over a hidden file input.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/avatar-upload.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/avatar-upload`

## Usage

```tsx
import { AvatarUpload } from "@/components/ui/avatar-upload"

<AvatarUpload src={user.avatarUrl} name={user.name} onChange={(file) => upload(file)} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| src | `string` |  | Current image, shown until a file is picked or removed. |
| name | `string` |  | Used for the initials and the image alt text. |
| onChange | `(file: File | null) => void` |  | Called with the picked file, or null when the image is removed. |
| size | `"sm" | "default" | "lg"` | `"default"` | Preview size: 40px, 64px or 96px. |
| accept | `string` | `"image/*"` | Accepted file types for the picker. |
| changeLabel | `string` | `"Change"` | Label on the pick button. |
| removeLabel | `string` | `"Remove"` | Label on the remove button. |
| disabled | `boolean` | `false` | Disables both buttons. |
| children | `ReactNode` |  | Optional helper text shown under the buttons. |

## When to use

- Profile and workspace settings where one image is picked, previewed and removed
- Onboarding steps that ask for a photo but can continue without one
- Anywhere a 40 to 96px round preview is enough to confirm the pick

## When not to use

- Cover images, galleries or multiple files, use a drop zone
- When the image needs cropping before upload
- Icons and logos that are not round

## Notes for agents

- It takes a function (onChange), so the page or demo that renders it must be a client component
- The preview is local only; onChange gives you the File and you upload it yourself
- Object URLs are revoked when a new file is picked or the component unmounts
- Remove is disabled while there is no image, and it clears src as well as a picked file

Docs: https://ui.goodtabs.co/components/avatar-upload