Shadcn.io is not affiliated with official shadcn/ui
Stepper 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
Strip step navigation down to its essence with this ultra-minimal line stepper for React and Next.js. A single thin horizontal line with small tick marks at each step position creates a ruler-like interface where the active tick enlarges with a blue accent. Built with TypeScript, shadcn/ui Button components, and Tailwind CSS for maximum restraint and elegance.
Related Components
Micro Dots Stepper
Tiny hoverable dot indicators for compact layouts
Compact Inline Stepper
Single-line text-based step navigation
Token Chips Stepper
Pill-shaped chip tokens as step indicators
Dense Row Stepper
Tightly packed horizontal row of step buttons
Dot Indicators Stepper
Animated dot-based step indicators
Linear Progress Stepper
Continuous linear progress bar stepper
FAQ
Was this page helpful?
Sign in to leave feedback.
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
Multi Form Merge
A parallel multi-form stepper with independent form sections that converge into a final submission step built with React, Next.js, shadcn/ui, and Tailwind CSS