Shadcn.io is not affiliated with official shadcn/ui
Stepper 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
Let users skip non-essential steps with this optional skippable stepper for React and Next.js. Required steps show solid connectors and must be completed, while optional steps feature dashed connector lines, a subtle "Optional" badge, and a Skip button. Skipped steps display a strikethrough title in muted text. Built with TypeScript, shadcn/ui Button and Badge components, and Tailwind CSS for flexible multi-step onboarding flows.
Related Components
Validation Errors Stepper
Horizontal stepper with inline validation error messages
Warning States Stepper
Vertical stepper with tiered warning levels and detail expansion
Locked Gated Stepper
Stepper with locked steps requiring prior completion
Dependency Chain Stepper
Flowchart stepper showing step dependencies and parallel tracks
Vertical Numbered Stepper
Classic vertical stepper with numbered circles and connecting lines
Account Setup Stepper
Stepper designed for account creation and setup flows
FAQ
Was this page helpful?
Sign in to leave feedback.
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
Parallel Tracks
A multi-track stepper wizard with independent parallel workflows that converge at a shared integration step built with React, Next.js, shadcn/ui, and Tailwind CSS