Progress Steps

ProNew

A vertical list of numbered steps that marks completed, current and upcoming steps, with optional links back to completed ones.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/progress-steps

Prop	Type	Default	Description
`steps`	`ProgressStep[]`	-	Steps in order: `{ id, label, description? }`.
`activeIndex`	`number`	-	Controlled current step.
`defaultActiveIndex`	`number`	`0`	Initial step when uncontrolled.
`onActiveIndexChange`	`(index: number) => void`	-	Called when a completed step is chosen.
`navigable`	`boolean`	`false`	Renders completed steps as buttons that return to them.
`label`	`string`	`"Progress"`	Accessible name of the list.

Also accepts all <ol> props except children.

The current step has aria-current="step".