Shadcn.io is not affiliated with official shadcn/ui
Stepper Micro Dots
A micro dot stepper with hover-reveal labels, color-coded states, and minimal footprint built with React, Next.js, shadcn/ui, and Tailwind CSS
Maximize content space with this micro dot stepper for React and Next.js. A row of tiny dots serves as the step indicator with no visible labels by default. Hover any dot to reveal its step name in a floating label above. Active dots glow blue, completed dots turn emerald, and upcoming dots stay muted. Built with TypeScript, shadcn/ui Button components, and Tailwind CSS for ultra-compact step navigation.
Related Components
Minimal Line Stepper
Thin line with tick marks for step positions
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
Condensed Timeline Stepper
Compact vertical timeline step layout
FAQ
Was this page helpful?
Sign in to leave feedback.
Locked Gated
A horizontal stepper with locked and unlocked step states, lock icons, gated progression, and unlock transitions built with React, Next.js, shadcn/ui, and Tailwind CSS
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