Shadcn.io is not affiliated with official shadcn/ui
Stepper Horizontal Numbered
A horizontal numbered stepper wizard with clickable steps, progress tracking, and step content built with React, Next.js, shadcn/ui, and Tailwind CSS
Guide users through multi-step workflows with this classic horizontal numbered stepper for React and Next.js. Each step displays a numbered circle connected by progress lines, with emerald checks for completed steps and blue highlights for the active step. Built with TypeScript, shadcn/ui Button and Badge components, and Tailwind CSS for a clean, accessible wizard experience.
Related Components
Vertical Numbered Stepper
A vertical stepper layout with numbered circles and connecting lines
Horizontal Icons Stepper
Horizontal stepper using unique icons instead of numbers
Vertical Icons Stepper
Vertical icon-based stepper with expandable content
Breadcrumb Chevrons Stepper
Breadcrumb-style stepper with chevron separators
Pill Segments Stepper
Segmented pill-style step navigation
Linear Progress Stepper
Stepper with a continuous linear progress bar
FAQ
Was this page helpful?
Sign in to leave feedback.
Horizontal Icons
A horizontal icon-based stepper with unique icons per step, connecting lines, and step content area built with React, Next.js, shadcn/ui, and Tailwind CSS
Inline Breadcrumb
A breadcrumb-style stepper with chevron separators, completion checkmarks, clickable navigation, and step content panel built with React, Next.js, shadcn/ui, and Tailwind CSS