Launch sale — 60% off Pro
Contact
AIBackgroundBlocksButtonsChartsComponentsHooksMCPPatternsPromptsShadcn UIShadersTextTheme
Onboarding

Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.

Previous: React Onboarding ChecklistNext: React Onboarding Cards
Unlock this block—Get Pro at 60% off

React Onboarding Stepper

Linear stepper with numbered steps, progress line, and navigation controls for sequential setup flows

Looking to implement shadcn/ui blocks?

Join our Discord community for help from other developers.


Guide users step-by-step with this linear stepper component. Features numbered step circles, connecting progress line, current step content panel, and navigation buttons. Built with shadcn/ui Card and Button. Perfect for account setup, form wizards, or sequential onboarding flows.

2
3
4
5

Company details

Tell us about your company so we can personalize your experience.

Step 2 content goes here

Step 2 of 5

Installation

React Onboarding Checklist

Expandable checklist

React Onboarding Progress

Progress bar style

React Onboarding Carousel

Feature carousel

React Onboarding Tour

Feature tour

React Onboarding First Project

First project creation

React Onboarding Walkthrough

Guided walkthrough

Questions you might have

React Onboarding Checklist

Expandable checklist with progress indicator, step descriptions, and action buttons for guided setup flows

React Onboarding Cards

Card grid with task cards, completion badges, and progress bar for non-linear setup tasks