Stepper

Organism

Multi-step progress indicator with complete, active, error, and pending states. Supports horizontal and vertical orientations.

Horizontal

Preview

  1. Account

    Personal info

  2. 2

    Billing

    Payment method

  3. 3

    Review

  4. 4

    Confirm

Code
<Stepper steps={[
  { label: 'Account', state: 'complete' },
  { label: 'Billing', state: 'active' },
  { label: 'Review', state: 'pending' },
  { label: 'Confirm', state: 'pending' },
]} />

Vertical

Preview

  1. Create account

    Enter your email and password

  2. Verify email

    Check your inbox

  3. 3

    Set up profile

Code
<Stepper orientation="vertical" steps={[
  { label: 'Create account', state: 'complete' },
  { label: 'Verify email', state: 'error' },
  { label: 'Set up profile', state: 'pending' },
]} />
Sourcemodules/ui/Stepper.tsx