Shadcn.io is not affiliated with official shadcn/ui
React Floating Overlay Stepper Block
A stepper with a floating toolbar overlay containing step dots and current step label, full-width content panels, and smooth navigation built with React, Next.js, shadcn/ui, and Tailwind CSS
Navigate multi-step flows with this floating toolbar stepper for React and Next.js. A hovering pill-shaped navigation bar displays step dots and the current step label, while content fills the area below for maximum focus. Built with TypeScript, shadcn/ui Button and Badge components, and Tailwind CSS for a modern, distraction-free wizard experience.
React Floating Overlay Stepper Block preview
Installation
Related Components
Tab Navigation Stepper
Horizontal tab-style stepper
Pill Segments Stepper
Segmented control style stepper
Sidebar Nav Stepper
Two-panel layout with sidebar steps
Bottom Bar Mobile Stepper
Mobile-optimized bottom navigation stepper
Minimal Line Stepper
Ultra-minimal line stepper
Card Content Stepper
Card-based content stepper
FAQ
Was this page helpful?
Sign in to leave feedback.
React File Upload Flow Stepper Block
A multi-step file upload wizard with drag-drop zone, file preview grid, configuration options, and upload progress bars built with React, Next.js, shadcn/ui, and Tailwind CSS
React Fraction Counter Stepper Block
A minimalist fraction-display stepper wizard with large typographic step counter, progress bar, and arrow navigation built with React, Next.js, shadcn/ui, and Tailwind CSS