Shadcn.io is not affiliated with official shadcn/ui
Wizard Steps
Wizard step navigation button group with previous/next controls and step labels for multi-step form navigation
Multi-step processes require clear progression—wizard navigation guides users through complex forms. This React component combines shadcn/ui's Button and ButtonGroup components with Lucide React's ChevronLeftIcon and ChevronRightIcon for wizard step controls with stateful step tracking, labeled step buttons showing progression (Account, Profile, Preferences, Review), and disabled boundary states. Built on Radix UI with array-based step generation and variant switching between default (active step) and outline (completed/future steps), the pattern delivers wizard navigation with clear position and context indication. Perfect for onboarding flows in SaaS applications like Notion or Airtable guiding new user setup, checkout processes in e-commerce platforms like Shopify collecting payment information, account creation forms requiring multiple information stages, or any interface with sequential form steps—button groups unify navigation controls, step labels provide context about current stage, back/next buttons enable correction and advancement. The dual approach shown (compact step counter vs labeled step buttons) demonstrates how wizard navigation balances simplicity for mobile or simple flows against clarity for desktop applications where space permits explicit step labeling, with step buttons enabling non-linear navigation when users need to revisit previous steps.
Wizard Steps preview
Installation
Related Components
Pagination
Multi-page navigation controls
Carousel Controls
Slide navigation with indicators
Status Selector
Workflow state selection
Form Component
Form layout patterns
Outline Button
Border-style button variant
Progress Component
Progress indication
FAQ
Was this page helpful?
Sign in to leave feedback.