Skip to content
Navigation

Stepper

A numbered progress indicator for multi-step flows like checkout, onboarding, and form wizards. Completed steps show a check, the active step is highlighted, and upcoming steps are muted.

Sourcesrc/components/ui/stepper.tsx

Horizontal

  1. Account
    Your details
  2. 2
    Shipping
    Where to
  3. 3
    Payment
    How to pay
  4. 4
    Review
    Confirm

Import

import { Stepper } from "@mikenotthepope/substrateui"

Vertical

  1. Account
    Your details
  2. Shipping
    Where to
  3. 3
    Payment
    How to pay
  4. 4
    Review
    Confirm

Accessibility

The stepper is an ordered list; the active step carries aria-current="step", and each step exposes a data-state of complete, active, or upcoming for styling hooks. State is conveyed by the check glyph and text weight, not color alone.

API Reference

PropTypeDefaultDescription
steps{ label: ReactNode; description?: ReactNode }[]—The ordered steps to render.
activeStepnumber—Zero-based index of the current step. Earlier steps render as completed.
orientation"horizontal" | "vertical""horizontal"Layout direction.