Introduction

The Stepper component displays progress through a sequence of steps using <ul>/<li> semantic elements. Useful for multi-step forms, registration flows, and order tracking.

Installation

import { Stepper, Step } from '@/components/ui/stepper';

Usage

<Stepper activeStep={1}>
<Step step={0} title="First" />
<Step step={1} title="Second" />
<Step step={2} title="Third" />
</Stepper>

Examples

Default

AccountCreate your account
2
ProfileSet up your profile
3
CompleteReview and finish

StepperDefault

import { Stepper, Step } from '@/components/ui/stepper';

export default function Component() {
  return (
    <Stepper activeStep={1}>
      <Step step={0} title="Account" description="Create your account" />
      <Step step={1} title="Profile" description="Set up your profile" />
      <Step step={2} title="Complete" description="Review and finish" />
    </Stepper>
  );
}

Vertical

Use orientation="vertical" for a vertical stepper layout.

Order PlacedYour order has been placed
ProcessingYour order is being processed
3
ShippedYour order has been shipped
4
DeliveredWaiting for delivery

StepperVertical

import { Stepper, Step } from '@/components/ui/stepper';

export default function Component() {
  return (
    <Stepper activeStep={2} orientation="vertical">
      <Step step={0} title="Order Placed" />
      <Step step={1} title="Processing" />
      <Step step={2} title="Shipped" />
      <Step step={3} title="Delivered" />
    </Stepper>
  );
}

Warning State

Steps can display a warning status to indicate issues that need attention.

DetailsEnter your details
VerificationVerify identity
3
PaymentComplete payment
4
ConfirmationOrder confirmed

StepperWarning

import { Step, Stepper } from '@/components/ui/stepper';

export function StepperDefault() {
  return (
    <Stepper activeStep={1}>
      <Step step={0} title='Account' description='Create your account' />
      <Step step={1} title='Profile' description='Set up your profile' />
      <Step step={2} title='Complete' description='Review and finish' isLast />
    </Stepper>
  );
}

export function StepperVertical() {
  return (
    <Stepper activeStep={2} orientation='vertical'>
      <Step step={0} title='Order Placed' description='Your order has been placed' />
      <Step step={1} title='Processing' description='Your order is being processed' />
      <Step step={2} title='Shipped' description='Your order has been shipped' />
      <Step step={3} title='Delivered' description='Waiting for delivery' isLast />
    </Stepper>
  );
}

export function StepperWarning() {
  return (
    <Stepper activeStep={2}>
      <Step step={0} title='Details' description='Enter your details' />
      <Step step={1} title='Verification' description='Verify identity' status='warning' />
      <Step step={2} title='Payment' description='Complete payment' />
      <Step step={3} title='Confirmation' description='Order confirmed' isLast />
    </Stepper>
  );
}

API Reference

Stepper

Prop	Type	Default	Description
`activeStep`	`number`	`0`	Current active step (zero-indexed)
`orientation`	`horizontal \| vertical`	`horizontal`	Layout direction

Step

Prop	Type	Default	Description
`step`	`number`	—	Step index (zero-indexed)
`title`	`string`	—	Step title
`description`	`string`	—	Step description
`status`	`completed \| active \| warning \| pending`	—	Step status
`isLast`	`boolean`	`false`	Whether this is the last step (hides connector)

Stepper

On this page