Stepper

Shows a run of steps in order, marking each one done, running or still to come.

Configurations

Supported configurations for this component.

3 examples

All pending

Mid-way

All complete

One command adds this component to your project.

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Every prop this component accepts. Any other prop is forwarded to the underlying element.

Prop	Type	Default	Description
activeStep	`number`	0	The index of the step in progress. Steps before it are complete, steps after it pending; -1 leaves every step pending and the step count or more marks every step complete.
labels	`{pending: string, active: string, complete: string}`	-	The state words read to assistive tech beside each title; defaults "Pending", "In progress", "Complete".
aria-label	`string`	-	Names the run for assistive tech (or use aria-labelledby).

Prop	Type	Default	Description
state	`'pending'\|'active'\|'complete'`	-	Overrides the state the root's `activeStep` gives this step.

Displays one headline number with its unit and its change.

Reports how strong a password is, in three steps and one word.

Offers a proposed next move the reader can take, such as a follow-up prompt or a task lane.