Stepper

Navigation

Shows progress through a sequence of steps.

Completed steps show a check, the active step is ringed, and upcoming steps are muted. Pass onStepChange to make steps clickable.

npx shadcn@latest add stepper

Horizontal

Numbered circles connected by progress lines with labels below.

Preview

Live

tsx

1<Stepper
2  steps={["Details", "Address", "Payment", "Confirm"]}
3  current={current}
4  onStepChange={setCurrent}
5/>

A compact left rail for forms and wizards.

Preview

Live

tsx

1<Stepper
2  steps={["Account", "Team", "Billing"]}
3  current={1}
4  orientation="vertical"
5/>

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

Prop	Type	Description
steps	string[]	The labels of each step in order.
current	number	The index of the active step, 0-based.
onStepChange	(step: number) => void	Makes steps clickable; called with the clicked index.
orientation	"horizontal" \| "vertical"= "horizontal"	The layout direction.