Shadcn.io is not affiliated with official shadcn/ui
Stepper Token Chips
A chip-based stepper with clickable rounded pill tokens, color-coded states, and inline status built with React, Next.js, shadcn/ui, and Tailwind CSS
Turn step navigation into a row of clickable chip tokens with this token chips stepper for React and Next.js. Each step renders as a rounded-full pill with the active chip highlighted in solid blue, completed chips bordered in emerald with a check icon prefix, and upcoming chips in muted backgrounds. Built with TypeScript, shadcn/ui Button and Badge components, and Tailwind CSS for a tag-like step navigation experience.
Related Components
Minimal Line Stepper
Thin line with tick marks for step positions
Micro Dots Stepper
Tiny hoverable dot indicators for compact layouts
Dense Row Stepper
Tightly packed horizontal row of step buttons
Compact Inline Stepper
Single-line text-based step navigation
Pill Segments Stepper
Segmented pill-style step navigation
Breadcrumb Chevrons Stepper
Breadcrumb-style stepper with chevron separators
FAQ
Was this page helpful?
Sign in to leave feedback.
Time Estimates
A vertical stepper with estimated time badges per step, running time remaining total, and actual completion times built with React, Next.js, shadcn/ui, and Tailwind CSS
Train Track
A railroad-inspired stepper wizard with parallel track lines, cross-ties, and station markers at each step built with React, Next.js, shadcn/ui, and Tailwind CSS