## Progress Steps (S—081)

A horizontal step indicator: the connecting line fills as you advance and finished steps turn into ticks.

- URL: https://sundaeui.dev/components/progress-steps
- Category: Navigation & menus · 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/progress-steps.json`
- Tags: wizard, steps, stepper, checkout, progress, onboarding

Numbered dots joined by a track. Moving forward fills the track to the next dot, then the finished dot flips to a tick; going back drains it.
Completed steps are clickable so people can jump back, but not ahead.

### Usage

```tsx
import { ProgressSteps } from '@/components/sundae/progress-steps'

<ProgressSteps />
```

### Props

- `steps` (`string[]`, required): Step labels.
- `current` (`number`, required): Active step index (0-based).
- `onStepClick` (`(i: number) => void`): Called when a finished step is clicked.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Checkout, sign-up and setup wizards with 3–5 steps.

### When not to use

- Long or branching flows: use a checklist.

### Accessibility

- An ordered list; the active step has aria-current="step".
- Finished steps are buttons with names like "Step 1, Account, completed".
- Reduced motion removes the movement and keeps every state change.