## Upload Queue (S—078)

A list of uploading files, each with its own progress bar, cancel, retry on failure and a tick when done.

- URL: https://sundaeui.dev/components/upload-queue
- 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/upload-queue.json`
- Tags: upload, files, queue, progress, retry, attachments

Every file row tracks its own state: uploading with a thin bar and percentage, failed with a retry button, or done with a tick that draws itself. A header sums progress across the queue.
Cancelled rows collapse out of the list. The demo simulates the network; wire upload state from your own uploader.

### Usage

```tsx
import { UploadQueue } from '@/components/sundae/upload-queue'

<UploadQueue />
```

### Props

- `files` (`{ id: string; name: string; size: number; progress: number; status: "uploading" | "done" | "error" }[]`, required): Rows.
- `onCancel / onRetry` (`(id: string) => void`): Row actions.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Attachments in composers, media libraries, bulk import.

### When not to use

- Single small files: inline button state is enough.

### Accessibility

- Each row has a progressbar with aria-valuenow and the file name as its label.
- Status changes (failed, done) are announced politely.
- Reduced motion removes the movement and keeps every state change.