## Photo Uploader (S—190)

A listing-photo grid: add images, drag to reorder, the first tile is the cover, and each tile can be removed.

- URL: https://sundaeui.dev/components/photo-uploader
- Category: Forms & inputs · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/photo-uploader.json`
- Tags: upload, listing, reorder, photos, gallery, drag-and-drop

Pick or drop images and they appear as square tiles with an upload ring. Drag a tile to reorder (or use the arrow buttons on focus); whichever is first gets the Cover badge.
A counter shows how many of the maximum are used, and the add tile hides at the limit.

### Usage

```tsx
import { PhotoUploader } from '@/components/sundae/photo-uploader'

<PhotoUploader />
```

### Props

- `max` (`number`, default `8`): Maximum photos.
- `onChange` (`(files: File[]) => void`): Called with files in order.
- `accept` (`string`, default `'image/*'`): Accepted types.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Marketplace listings, profiles, property and product forms.

### When not to use

- Single avatar: use an avatar upload.

### Accessibility

- Tiles are list items with Move earlier / Move later / Remove buttons, so reordering never needs dragging.
- Reorders and removals are announced.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- Drag: Reorder
- Tab to tile: Reveal move / remove buttons