Velora UI

Stepper

Progress indicator for multi-step forms and checkouts.

  • 1.4 KB gzipped
  • Deps: motion/react
  • Reduced-motion safe
  • Base UI & Radix compatible
Open in v0

Preview

  1. Step 1: Account, complete
  2. Step 2: Plan
  3. Step 3: Done

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/stepper.json

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

Props

PropTypeDefault
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—
classNamestring—

Accessibility

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".