Shadcn Stepper
View docsBrowse 15 production-ready shadcn stepper components for multi-step forms, onboarding flows, and checkout processes. Covers progress bar, segmented progress, vertical orientation, completed state, loading state, controlled navigation, icons and badges, step descriptions, and inline title variants: a custom ReUI component.
Basic stepper
Stepper with completed state
Stepper with loading state
Controlled stepper
Stepper with title and indicator
Stepper with progress bar indicator
Stepper with icons and badges
Stepper with descriptions
Stepper with inline titles
Stepper with content for each step
Stepper with progress bar and titles
Stepper with segmented progress bar
Stepper with vertical orientation and descriptions
Stepper with vertical orientation
Stepper with vertical orientation and titles
Shadcn Stepper: Multi-Step Forms and Onboarding Flows
ReUI Stepper is a custom shadcn component for guiding users through multi-step processes. It renders step indicators: numbered circles, icons, or progress segments: connected by a progress line, and controls which step is active, completed, or pending.
Fifteen components cover basic steppers, step content panels, progress bar indicator, segmented progress bar, vertical orientation with descriptions, vertical with titles, completed state, loading state per step, controlled navigation, step with titles and indicator, icons and badges per step, step descriptions, and inline title layouts.
The sections below explain the component model, use cases in checkout and onboarding, features, and how Stepper composes with Form, Button, and Badge.
What is Shadcn Stepper?
ReUI Stepper is a custom component: not part of base shadcn/ui: that renders a multi-step progress indicator with controlled step navigation. Each step has an index, title, optional description, and content panel. The active step is set from outside via props (controlled mode) or managed internally (uncontrolled). Steps transition between pending, active, completed, loading, and error states.
Fifteen components show steppers in realistic multi-step form layouts: a checkout stepper with address, payment, and confirm steps; an onboarding wizard with account setup, profile, and preferences; a form with per-step validation where the next button is disabled until the current step's fields pass Zod validation.
Why Use Shadcn Stepper?
Multi-step forms reduce cognitive load by breaking long forms (checkout, registration, onboarding, application) into smaller focused screens. A clear step indicator shows users where they are, how many steps remain, and which steps are complete: reducing abandonment. ReUI Stepper provides all visual states (completed checkmark, loading spinner, error icon) and orientation variants without custom CSS.
The controlled stepper component is critical for form validation: only advance when the current step's fields pass validation, and allow back navigation to any completed step. Pair with React Hook Form for per-step validation and Shadcn Badge for optional step labels.
Shadcn Stepper Features
- Custom ReUI Component. ReUI Stepper is a custom shadcn component not available in base shadcn/ui. It is purpose-built for multi-step forms, onboarding wizards, and checkout flows with full state management and accessibility.
- Progress Bar and Segmented Indicator. Two progress display modes: a continuous progress bar that fills proportionally as steps complete, and a segmented bar where each step occupies an equal segment: useful for checkout indicators.
- Vertical and Horizontal Orientation. Horizontal orientation for compact headers; vertical orientation for sidebars and step-by-step guides where each step has a description and content area below the indicator.
- Completed, Loading, and Error States. Steps transition through pending, active, loading (async operations with Spinner), completed (checkmark icon), and error states. Each state has a distinct visual indicator.
- Controlled Navigation. Fully controlled via activeStep prop. Pass onStepChange to handle navigation. Disable the next button until the current step validates. Allow back navigation to any completed step.
- Icons and Badges per Step. Replace number indicators with custom icons (upload, payment, confirm) and add Badge labels (optional, required, new) to step indicators without breaking the progress line layout.
- Step Descriptions and Inline Titles. Each step supports title and description text. Inline title variant places the title on the same line as the indicator for compact layouts; separate title variant stacks them vertically for detailed guides.
- Step Content Panels. Each step renders a content panel: form fields, information, or confirmation UI: that shows when the step is active. Transition between steps with smooth content swap or page-level routing.
ReUI Stepper: In-House Custom Shadcn Component
ReUI Stepper is an in-house component built and maintained by the ReUI team as part of the ReUI open-source library. It is designed to integrate seamlessly into any shadcn/ui project: following the same copy-and-own installation model. The component source lands directly in your repository; you own it, extend it, and style it with your Tailwind CSS tokens. ReUI Stepper is a custom multi-step progress component not available in base shadcn/ui. It renders step indicators in horizontal and vertical orientations with distinct visual states: pending, active, loading (Spinner), completed (checkmark), and error. Fifteen components cover all common multi-step form, checkout, and onboarding wizard layouts with controlled and uncontrolled navigation modes.
The component is available in two API flavors to match your primitive stack: a Radix UI version for teams using Radix-based shadcn primitives, and a Base UI version for teams on @base-ui/react. Both versions share identical visual output and Tailwind CSS styling: only the underlying headless primitive differs. ReUI maintains 10+ such in-house components, all available in both Radix and Base UI versions, each with dedicated documentation covering the full component API, usage examples, and prop references.
Integrating With Other Components
Pair Stepper with React Hook Form: use trigger() for per-step field validation before advancing, and handleSubmit() on the final step. Wrap each step's fields in Shadcn Field with Shadcn Label and error message slots.
Use Shadcn Button for Previous and Next navigation controls below the step content, Shadcn Spinner inside the Next button during async step transitions, and Shadcn Badge for optional or required step labels on indicators.
Embed Stepper in Shadcn Dialog for modal multi-step flows like payment setup or account creation, or in Shadcn Card for inline setup wizards on dashboard pages.