Skip to content
Wave 3

Stepper

Progress through a multi-step flow. Server-component safe.

  • Navigation between unrelated pages.
  • Two steps: a heading is enough.

Install

Terminal
pnpm dlx shadcn@latest add @acme/stepper

Or import from the package: import { Stepper } from '@acme/react'

Examples

Basic

stepper-basic.tsx
import { Stepper } from '@/components/ui/stepper'

export default function StepperBasic() {
  return (
    <Stepper
      label="Checkout progress"
      className="w-full max-w-2xl"
      current={1}
      steps={[
        { title: 'Account', description: 'Name and email' },
        { title: 'Plan', description: 'Seats and billing' },
        { title: 'Payment', description: 'Card details' },
        { title: 'Review' },
      ]}
    />
  )
}

Props

Stepper props
PropTypeDefaultDescription
steps (required){ title, description? }[]—The steps.
current (required)number—Zero-based current step.
labelstring'Progress'Names the navigation landmark.

Accessibility

Role
navigation > ordered list
Built in
  • The current step has aria-current="step".
  • Completed steps say "completed" in text, not just a check mark.
WCAG 2.2 criteria
1.3.1, 1.4.1

Don’t

  • Make future steps clickable before earlier ones are valid.

Tokens

  • color.primary
  • color.input
  • color.muted-foreground