Stepper

Multi-step progress for wizards and pipelines. Connectors fill in the direction of travel and completed steps draw their check mark.

Navigation

Step 1 · Account

Pick a workspace name, you can change it later.

Workspace name

Playground

Tweak the props, the preview and the code follow.

Props

orientation

steps4

active step2

titles

descriptions

<Stepper value={2} onValueChange={setStep}>
  <StepperItem step={1}>
    <StepperTrigger>
      <StepperIndicator />
      <StepperTitle>Cart</StepperTitle>
    </StepperTrigger>
    <StepperSeparator />
  </StepperItem>
  …
  <StepperItem step={4} last>…</StepperItem>
</Stepper>

Installation

npx @plumsydev/plum-ui add stepper

Usage

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

<Stepper value={step} onValueChange={setStep}>
  <StepperItem step={1}>
    <StepperTrigger>
      <StepperIndicator />
      <StepperTitle>Account</StepperTitle>
    </StepperTrigger>
    <StepperSeparator />
  </StepperItem>
  <StepperItem step={2} last>…</StepperItem>
</Stepper>

Examples

Vertical

orientation="vertical" with descriptions, here driven by a timer like a CI run.

Compact

Indicators only, for quizzes and short flows.

Question 2 of 6

API Reference

Stepper

Prop	Type	Default
`value / defaultValue` The active step (1-based). Steps below it are completed.	`number`	`1`
`onValueChange` Called when a trigger is clicked.	`(step: number) => void`	`—`
`orientation` Layout direction.	`"horizontal" \| "vertical"`	`"horizontal"`

StepperItem

Prop	Type	Default
`step*` Position of the step.	`number`	`—`
`completed` Force the completed state.	`boolean`	`—`
`disabled` Disable the trigger.	`boolean`	`—`
`last` Hide the connector after this step.	`boolean`	`—`

Notes

Set value to steps + 1 to mark every step as completed.

PreviousSpotlight NextSwitch