Stepper

Progress indicator for multi-step forms and checkouts.

Installation

pnpm dlx shadcn@latest add https://paulkeys.org/r/stepper.json

Adds components/velora/stepper.tsx, installs motion and merges the keyframes and tokens into your CSS.

Prop	Type	Default
`steps*`	`string[]`	`—`
`current*` Zero-based index of the step in progress	`number`	`—`
`onStepClick` Make completed steps clickable; other markers render as plain text	`(index: number) => void`	`—`
`className`	`string`	`—`

Reduced motion: The progress bar jumps to its new fill instead of animating. Marker colors still change with a short color transition.
Keyboard: With `onStepClick`, completed steps are buttons that Tab reaches and Enter or Space activates. Otherwise markers are plain text and not focusable.
Screen readers: An ordered list where each marker is named like "Step 1: Account, complete" and the current step's item has aria-current="step".

Progress indicator for multi-step forms and checkouts.

pnpm dlx shadcn@latest add https://paulkeys.org/r/stepper.json

Adds components/velora/stepper.tsx, installs motion and merges the keyframes and tokens into your CSS.

Prop	Type	Default
`steps*`	`string[]`	`—`
`current*` Zero-based index of the step in progress	`number`	`—`
`onStepClick` Make completed steps clickable; other markers render as plain text	`(index: number) => void`	`—`
`className`	`string`	`—`

Reduced motion: The progress bar jumps to its new fill instead of animating. Marker colors still change with a short color transition.
Keyboard: With `onStepClick`, completed steps are buttons that Tab reaches and Enter or Space activates. Otherwise markers are plain text and not focusable.
Screen readers: An ordered list where each marker is named like "Step 1: Account, complete" and the current step's item has aria-current="step".