Search documentation

Search Stepper docs, API, guides, and release notes.

Stepperby francozeta

basics

Installation

Install Stepper through the shadcn registry and copy the component source into your app.

Install

Stepper is installed through the shadcn registry. The CLI copies the component source into your project, so you can customize it directly.

terminal
Copy code is available in the top right.
pnpm dlx shadcn@latest add @stepper/stepper

What gets added

Stepper does not install as a runtime package. After installation, the source belongs to your project.

stepper.tsx
app/page.tsx
Copy code is available in the top right.
import {
  Stepper,
  StepperContent,
  StepperDescription,
  StepperIndicator,
  StepperItem,
  StepperLabel,
  StepperList,
  StepperNext,
  StepperPrevious,
  StepperTrigger,
  useStepper,
} from "@/components/ui/stepper";

Use it uncontrolled

Use defaultValue when the Stepper can own its active step.

checkout-stepper.tsx
Copy code is available in the top right.
import {
  Stepper,
  StepperContent,
  StepperItem,
  StepperList,
  StepperNext,
  StepperPrevious,
} from "@/components/ui/stepper";

export function CheckoutStepper() {
  return (
    <Stepper defaultValue="account">
      <StepperList>
        <StepperItem value="account" completed>
          Account
        </StepperItem>
        <StepperItem value="profile">Profile</StepperItem>
        <StepperItem value="payment" disabled>
          Payment
        </StepperItem>
      </StepperList>

      <StepperContent value="account">Account content</StepperContent>
      <StepperContent value="profile">Profile content</StepperContent>
      <StepperContent value="payment">Payment content</StepperContent>

      <div className="mt-6 flex justify-between">
        <StepperPrevious />
        <StepperNext />
      </div>
    </Stepper>
  );
}

Use it controlled

Pass value and onValueChange when app state, validation, or routing decides the current step.

controlled-usage.tsx
Copy code is available in the top right.
const [step, setStep] = React.useState("details");

<Stepper value={step} onValueChange={setStep}>
  <StepperList>
    <StepperItem value="details">Details</StepperItem>
    <StepperItem value="review">Review</StepperItem>
    <StepperItem value="confirm">Confirm</StepperItem>
  </StepperList>

  <StepperContent value="details">Collect details.</StepperContent>
  <StepperContent value="review">Review the request.</StepperContent>
  <StepperContent value="confirm">Confirm the flow.</StepperContent>
</Stepper>;