Progress Steps

Data Display

A multi-step indicator that shows how far through a flow the user is.

ProgressSteps renders a horizontal trail of numbered circles connected by lines. Completed steps get a check, the current step is ringed, and future steps stay muted.

npx shadcn@latest add progress-steps

Interactive

Drive the current index with state and move between steps.

Preview

Live

1Account
2Billing
3Review
4Done

tsx

1const [step, setStep] = useState(0)
2
3<ProgressSteps
4  steps={["Account", "Billing", "Review", "Done"]}
5  current={step}
6/>
7<Button onClick={() => setStep((s) => Math.min(4, s + 1))}>Next</Button>

Static states

Pass a fixed current value to render a snapshot.

Preview

Live

Build
2Test
3Deploy

Build
Test
Deploy

tsx

1<ProgressSteps steps={["Build", "Test", "Deploy"]} current={1} />
2<ProgressSteps steps={["Build", "Test", "Deploy"]} current={3} />

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
steps	string[]	The step labels, in order.
current	number	Zero-based index of the active step. Steps before it are marked done.
className	string	Merge extra classes onto the list.