Shadcn.io is not affiliated with official shadcn/ui
React Token Chips Stepper Block
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.
React Token Chips Stepper Block preview
Installation
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.
React Time Estimates Stepper Block
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
React Train Track Stepper Block
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