Shadcn.io is not affiliated with official shadcn/ui
Stepper Pill Segments
A segmented control stepper with pill-shaped buttons, active segment highlighting, completion indicators, and swappable content panels built with React, Next.js, shadcn/ui, and Tailwind CSS
Build intuitive multi-step workflows with this segmented control stepper for React and Next.js. The active segment pops with a white background and subtle shadow inside a muted container, while completed segments display check icons. Built with TypeScript, shadcn/ui Button and Badge components, and Tailwind CSS for a polished iOS-inspired navigation feel.
Related Components
Tab Navigation Stepper
Horizontal tab-style stepper
Sidebar Nav Stepper
Two-panel layout with sidebar steps
Bottom Bar Mobile Stepper
Mobile-optimized bottom navigation stepper
Floating Overlay Stepper
Floating toolbar navigation stepper
Vertical Numbered Stepper
Classic vertical numbered stepper
Linear Progress Stepper
Stepper with linear progress bar
FAQ
Was this page helpful?
Sign in to leave feedback.
Percentage Display
A data migration stepper with large percentage indicator, full-width progress bar, step details, and navigation controls built with React, Next.js, shadcn/ui, and Tailwind CSS
Premium Showcase
An all-in-one premium stepper wizard with numbered step indicators, progress bar, contextual tips panel, draft save indicator, and full keyboard navigation built with React, Next.js, shadcn/ui, and Tailwind CSS