Docs·Stepper

Stepper

An accessible multi-step flow with controlled or uncontrolled state, visited-step navigation, keyboard controls, spring progress, directional panel transitions, and a completion state.

Installation

$pnpm dlx shadcn@latest add @spiderui/stepper

Usage

API Reference

PropTypeDefault
stepsOrdered labels and panel content for the flow.
readonly StepperStep[]—
indexControlled active step index.
number—
defaultIndexInitial step for uncontrolled usage.
number0
onIndexChangeCalled when a step change is requested.
(index: number, direction: 1 | -1) => void—
onCompleteCalled when the final action is pressed.
() => void—
completeDisplays completed rail and confirmation panel.
booleanfalse
heightSets a stable panel height during transitions.
number | string184
backLabelBack action label.
string"Back"
nextLabelIntermediate forward action label.
string"Next"
finishLabelFinal forward action label.
string"Finish"
labelAccessible name for the progress rail.
string"Steps"
panelClassNameClasses applied to the content panel.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x

Step 2 of 3: Billing details

Workspace detailsBilling detailsReview workspace
  3. Step 3 of 3: Review workspace3
import { Stepper, type StepperStep } from "@/components/ui/stepper"
export function WorkspaceOnboarding() {
  const [complete, setComplete] = useState(false)

  const steps: StepperStep[] = [
    { id: "profile", label: "Your profile", content: <ProfileForm /> },
    { id: "team", label: "Invite your team", content: <InviteForm /> },
    { id: "review", label: "Review", content: <Review /> },
  ]

  return (
    <Stepper
      steps={steps}
      complete={complete}
      height={220}
      finishLabel="Create workspace"
      onComplete={() => setComplete(true)}
    />
  )
}