Stepper

Steps joined by a tube that fills as you progress.

Built on Icons.

Ship toMira Okafor18 Harbour Street, LeithEdinburgh EH6 6PZ

Installation

npx shadcn@latest add https://neonkit.heyaadi.com/r/stepper.json

Usage

import { Step, Stepper } from "@/components/ui/stepper"

<Stepper value={step} onValueChange={setStep}>
  <Step title="Cart" />
  <Step title="Shipping" description="Address and speed" />
  <Step title="Payment" />
</Stepper>

Examples

Vertical with an error

status="error" turns a step red with a cross. Retry and watch the tube run down to the deploy.

Icons and optional steps

An icon replaces the number until the step is done. optional adds a caption under the title.

API reference

Stepper

Renders an ol and accepts every native attribute. Its children should be Step elements.

Prop	Type	Default
`value`	`number` Index of the current step when controlled. Earlier steps are complete; pass the step count to complete them all.	None
`defaultValue`	`number` Initial current step when uncontrolled.	`0`
`onValueChange`	`(index: number) => void` Called when a clickable step is picked.	None
`orientation`	`"horizontal" \| "vertical"` Horizontal centers labels under the markers and hides descriptions below sm.	`"horizontal"`
`clickable`	`boolean` Render each step as a button that moves the stepper to it.	`false`
`color`	`NeonColor` Palette name or hex. Falls back to --neon-accent, then cyan.	inherited

Step

Renders an li.

Prop	Type	Default
`title`	`ReactNode` Step name.	None
`description`	`ReactNode` Second line under the title.	None
`icon`	`ReactNode` Shown in the marker instead of the number until the step is complete.	None
`status`	`"error"` Marks the step as failed: red marker, cross and title.	None
`optional`	`boolean` Shows an "Optional" caption under the title.	`false`
`disabled`	`boolean` With a clickable stepper, blocks jumping to this step.	`false`

Accessibility

The steps are an ordered list, and the current one has aria-current="step".
Completed and failed steps add hidden text (", completed" or ", failed") so the state is not conveyed by color alone.
With clickable, each step is a native button: Tab moves between them and Enter or Space selects. Disabled steps are skipped.
Markers and connectors are decorative and hidden from screen readers.
The connector fill and the check are CSS transitions, so they reverse cleanly when interrupted; with reduced motion they switch instantly.