Shadcn.io is not affiliated with official shadcn/ui
Stepper Mini Sidebar
A narrow sidebar stepper with numbered circles connected by a vertical line, hover tooltips, and a wide content panel built with React, Next.js, shadcn/ui, and Tailwind CSS
Build clean wizard interfaces with this mini sidebar stepper for React and Next.js. A narrow vertical rail displays only numbered circles connected by a thin line, keeping the sidebar footprint minimal while the content area maximizes available space. Hover over any number to reveal the step name in a tooltip. Built with TypeScript, shadcn/ui Button components, and Tailwind CSS for setup wizards, onboarding flows, and configuration panels where screen real estate matters.
Related Components
Condensed Timeline Stepper
High-density vertical timeline with expandable rows
Single Line Stepper
All steps rendered on a single line of text
Compact Card Stepper
Small card widget stepper with dot indicators
Inline Breadcrumb Stepper
Breadcrumb trail repurposed as a stepper
Sidebar Nav Stepper
Full sidebar navigation with labels and icons
Vertical Numbered Stepper
Classic vertical numbered step layout
FAQ
Was this page helpful?
Sign in to leave feedback.
Milestone Flags
A flag and pennant marker stepper with raised, waving, and lowered states along a horizontal progress line built with React, Next.js, shadcn/ui, and Tailwind CSS
Minimal Line
An ultra-minimal line stepper with tick marks, subtle labels, and maximum whitespace built with React, Next.js, shadcn/ui, and Tailwind CSS