Stepper

Installation

npx shadcn@latest add @blank/stepper

Usage

import {
  Stepper,
  StepperDescription,
  StepperIndicator,
  StepperItem,
  StepperSeparator,
  StepperTitle,
  StepperTrigger,
} from "@/components/ui/stepper"

<Stepper defaultValue={2}>
  <StepperItem step={1} className="not-last:flex-1">
    <StepperTrigger>
      <StepperIndicator />
      <StepperTitle>Account</StepperTitle>
    </StepperTrigger>
    <StepperSeparator />
  </StepperItem>
  <StepperItem step={2}>
    <StepperTrigger>
      <StepperIndicator />
      <StepperTitle>Workspace</StepperTitle>
    </StepperTrigger>
  </StepperItem>
</Stepper>

Steps before the active one are completed, the rest inactive. Every part reads its item's data-state — completed, active or inactive — plus data-disabled and data-loading, so restyling a state is one selector.

Triggers form a single tab stop: arrow keys move between them, Home and End jump to the ends, Enter or Space opens a step. The active trigger carries aria-current="step". Leave triggers out for a stepper that only shows progress.

Examples

Vertical

API Reference

Stepper

StepperItem

StepperTrigger takes asChild. useStepper() returns activeStep and setActiveStep for Back and Next buttons inside the stepper.