Stepper

Installation

pnpm dlx shadcn@latest add @diceui/stepper
 

Layout

Import the parts, and compose them together.

import {
  Stepper,
  StepperList,
  StepperItem,
  StepperTrigger,
  StepperIndicator,
  StepperTitle,
  StepperDescription,
  StepperSeparator,
  StepperContent,
  StepperPrev,
  StepperNext,
} from "@/components/ui/stepper";
 
return (
  <Stepper>
    <StepperList>
      <StepperItem>
        <StepperTrigger>
          <StepperIndicator />
          <StepperTitle />
          <StepperDescription />
        </StepperTrigger>
        <StepperSeparator />
      </StepperItem>
    </StepperList>
    <StepperContent />
    <StepperPrev /> 
    <StepperNext />
  </Stepper>
)

Examples

Vertical Layout

A stepper with vertical orientation for compact layouts.

With Validation

Use the onValidate prop to validate the current step before moving to the next one.

With Form

A stepper integrated with form validation, showing step-by-step form completion.

API Reference

Stepper

The main container component for the stepper.

StepperList

The container for stepper items, typically an ordered list.

StepperItem

A single step item in the stepper.

StepperTrigger

The clickable trigger for each step, typically wrapping the indicator.

StepperIndicator

The visual indicator showing the step number or completion status.

StepperSeparator

The line connecting steps, showing progress between them.

StepperTitle

The title text for each step.

StepperDescription

The description text for each step.

StepperContent

The content area that displays for the active step.

StepperPrev

A navigation button that moves to the previous step. Automatically disabled on the first step and skips validation when navigating backwards.

StepperNext

A navigation button that moves to the next step. Automatically disabled on the last step and respects validation rules when navigating forwards.

Accessibility

Keyboard Interactions