Shadcn.io is not affiliated with official shadcn/ui
Stepper Onboarding Guide
A friendly app onboarding wizard stepper with horizontal dot progress, illustration placeholders, step descriptions, and skip/continue navigation built with React, Next.js, shadcn/ui, and Tailwind CSS
Create a welcoming first-run experience with this onboarding guide stepper for React and Next.js. Horizontal dot indicators track progress through each onboarding step, with spacious content cards featuring illustration areas, titles, descriptions, and contextual action buttons. Users can skip optional steps or continue through the flow. Built with TypeScript, shadcn/ui Button and Badge components, and Tailwind CSS for a clean, inviting onboarding journey.
Related Components
Checkout Flow Stepper
E-commerce checkout wizard with cart and payment
Account Setup Stepper
Split-panel account creation wizard
Profile Completion Stepper
Checklist stepper with circular progress ring
Booking Reservation Stepper
Multi-step hotel and travel booking wizard
Dot Indicators Stepper
Ultra-minimal dot-based stepper navigation
Card Content Stepper
Card-based stepper with swappable content panels
FAQ
Was this page helpful?
Sign in to leave feedback.
Nested Substeps
A hierarchical stepper wizard with main steps that expand to reveal nested sub-steps with independent progress tracking built with React, Next.js, shadcn/ui, and Tailwind CSS
Optional Skippable
A vertical stepper with optional and required steps, skip functionality, dashed connectors, and strikethrough labels built with React, Next.js, shadcn/ui, and Tailwind CSS