Components
Stepper
Done, current and pending — with a line that reports progress.
- RequestedRequested — done
- ManagerManager — done
- SecuritySecurity — current
- FinanceFinance — pending
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/stepper.jsonA done step loses its number
It gets a tick instead. Once a step is behind you, its position matters less than the fact it is finished, and the tick says that faster than a number does.
The current step is an outlined disc, not a filled one. Filling it would make it look done — which is the one thing it is not.
The connector carries the progress
It fills up to the current step and stays hairline after it, so the line itself reports how far along you are without needing a percentage anywhere.
The four-step approval chain in the Purchase requests screen was hand-rolled before this existed. If you are drawing numbered discs joined by lines, this is the component.
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | string[] | — | Labels, in order. |
| current | number | — | Zero-based index of the step in progress. |