127 Components

Stepper Wizard

Navigation

Multi-step onboarding and checkout progress wizard with spring-animated connector bars, clickable step indicators, and directional panel transitions.

Workspace

Design Tokens

Ship & Verify

Step 1 of 3

Configure your project name and repository region.

Connected to us-east-1 production cluster with automatic backups enabled.

Installation

Install directly into your project using the shadcn CLI or copy the source code manually.

Requires:framer-motionlucide-reactclsxtailwind-merge

$npx shadcn@latest add "https://boseui.site/r/stepper.json"

TypeScript props supported by <Stepper />.

7 props

Prop	Type	Default	Description
steps	`StepItem[]`	—	Array of step objects ({ id, title, description, detail }).
activeStep	`number`	—	Controlled active step index (0-based).
defaultStep	`number`	`0`	Initial active step index for uncontrolled mode.
onStepChange	`(stepIndex: number) => void`	—	Callback fired whenever the active step changes.
onComplete	`() => void`	—	Callback fired when the user completes the final step.
allowStepClick	`boolean`	`true`	Allows users to jump directly to a step by clicking its node.
className	`string`	—	Additional Tailwind CSS classes for the outer wizard container.

Spring-animated progress bar connecting step nodes with checkmark completion states.
Directional slide transitions when moving forward or backward between steps.
Supports both controlled (`activeStep`, `onStepChange`) and uncontrolled (`defaultStep`) usage.