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.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/button-group-navigation-3.json

npx shadcn@latest add https://www.shadcn.io/registry/button-group-navigation-3.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/button-group-navigation-3.json

bunx shadcn@latest add https://www.shadcn.io/registry/button-group-navigation-3.json

Related patterns you will also like

Questions you might have