## Setup Checklist (S—067)

An onboarding checklist: ticks draw in, a ring fills with each step, and the title turns to “All set”.

- URL: https://sundaeui.dev/components/setup-checklist
- Category: UI components · Art direction: Understated
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/setup-checklist.json`
- Tags: checklist, todo, checkbox, progress, onboarding, ring

Each row is a real checkbox. Ticking one draws the check, strikes the label through softly and advances the progress ring in the header.
When every step is done the ring closes with a check and the title changes, so the card can stay on screen as a quiet confirmation.

### Usage

```tsx
import { SetupChecklist } from '@/components/sundae/setup-checklist'

<SetupChecklist
  items={[
    { id: 'profile', label: 'Add your profile photo', done: true },
    { id: 'team', label: 'Invite two teammates' },
  ]}
  onDoneChange={save}
/>
```

### Props

- `items` (`ChecklistItem[]`, required): id, label and optional starting done state.
- `done` (`string[]`): Controlled list of done ids.
- `onDoneChange` (`(ids: string[]) => void`): Called on every toggle.
- `title / doneTitle` (`string`, default `'Get started' / 'All set'`): Header text before and after finishing.
- `progress` (`'ring' | 'bar'`, default `'ring'`): Progress style.
- `density` (`'comfy' | 'compact'`, default `'comfy'`): Row height.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- First-run setup in a product: a handful of steps people finish over a few sessions.
- Launch or release checklists in a sidebar.

### When not to use

- Long to-do lists: use a full task list with sorting.
- Steps that must happen in order: use a stepper.

### Accessibility

- Rows are native checkboxes inside labels, so Space toggles and screen readers report state.
- Progress is a role="progressbar" with the done count as its value.
- Reduced motion removes the draw-in, ring sweep and title fade.

### Keyboard

- Tab: Move between steps
- Space: Tick or untick a step

### FAQ

**Can a step link somewhere instead of ticking?**
Yes. Replace the label text with a link and tick the item from your own code once the task is really done, using the done prop.

**How many steps fit?**
Four to six reads best in a card. Past that, group them.