Shadcn.io is not affiliated with official shadcn/ui
Onboarding Stepper
A numbered stepper onboarding block for React and Next.js with sequential step navigation, progress indicators with checkmarks, and dynamic content areas. Built with shadcn/ui and Tailwind CSS.
Navigate sequential setup tasks with this linear stepper onboarding block for React and Next.js. Features numbered step indicators with completed checkmarks, a current step highlight with background color, back and next navigation buttons with disabled states, a step counter showing progress, and a dynamic content area for each step. Built with TypeScript, shadcn/ui Button component, Framer Motion entrance animations, and Tailwind CSS. Perfect for account setup wizards, multi-step form flows, and sequential configuration workflows.
Related Components
React Onboarding Checklist
Expandable setup checklist with progress tracking
React Onboarding Progress
Visual progress bar with completion percentage
React Onboarding Carousel
Feature showcase carousel with slide navigation
React Onboarding Cards
Grid of setup task cards with completion states
React Onboarding Tour
Interactive product tour with tooltips
React Guided Walkthrough Onboarding
Step-by-step guided walkthrough with highlights
FAQ
Was this page helpful?
Sign in to leave feedback.
Status Page
A status page configuration onboarding block for React and Next.js with domain input, service component rows, status selectors, and publish button. Built with shadcn/ui and Tailwind CSS.
Success Metrics
A success metrics definition onboarding block for React and Next.js with multi-select KPI options, checkbox indicators, and goal-setting CTA. Built with shadcn/ui and Tailwind CSS.