Feedback
Progress steps
State is carried by the palette's two weights rather than by colour coding: finished and current steps sit on the primary slots, steps still ahead sit on the secondary ones. The connector fills as progress is made, so the row reads as one bar that is partly done rather than as a set of separate lamps, and the live step carries a slow pulse that never completes - which is what 'in progress' actually means. Not to be confused with Input stepper, which increments a number.
npx shadcn@latest add @minflow/progress-stepsWhere to use it
- Checkout, onboarding, and setup flows where the number of stages is known in advance.
- Vertical, when each step needs a line of explanation and the flow is a checklist rather than a strip.
- Not for a process of unknown length - a progress bar or a spinner is honest there, and a fake step count is not.
Variations
Horizontal
Above a form, where the steps are short labels and the point is how far through you are.
Vertical
When each stage needs a supporting line, or when the list is long enough that horizontal labels would truncate.
Finished
The end state. Every marker takes the tick and the connector is fully drawn, so completion is visible without a separate success screen.