Stepper

Storybook

Show where a multi-stage flow stands

An ordered list of steps for wizards and other staged flows. Steps before the active one render complete with a check, the active step takes the primary action fill and aria-current, and later steps stay muted until the flow reaches them. Pass an onStepClick handler and completed steps become buttons, so a reader can revisit an earlier stage without losing their place.

Default

  1. Account
  2. Delivery
  3. Payment
  4. Review

With descriptions

  1. AccountSign in or continue as a guest
  2. DeliveryAddress and shipping speed
  3. PaymentCard or saved method
  4. ReviewConfirm and place the order

Vertical

  1. AccountSign in or continue as a guest
  2. DeliveryAddress and shipping speed
  3. PaymentCard or saved method
  4. ReviewConfirm and place the order

Progress states

  1. Account
  2. Delivery
  3. Payment
  4. Review
  1. Account
  2. Delivery
  3. Payment
  4. Review

In a wizard

  3. Payment
  4. Review
tsx
// From the npm package
import { Stepper } from 'rift-ds/components/Stepper/Stepper';

// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/stepper.json