shadcn.io is not affiliated with official shadcn/ui
Token Chips Stepper Block for Radix UI
A bike-repair job card as five wrapping chips that name their own state as Done, Now or Next, with a short panel and the labour booked so far.
Installation
Overview
Say where each step stands in a word, with this chip stepper for React with Radix UI. A plus-marked frame holds a Steps set of five rounded chips for a bike workshop's job card: Diagnose, Strip, Fix, Rebuild and Test ride. Each chip shows a glyph, the step's name and a word, Done, Now or Next; the chip you are on is filled, the finished ones are outlined with a check, and nothing draws a line between them. They wrap onto a second line like tags. Every chip you have reached is a button. Under the chips, a short panel says what the step is and shows its labour with a Data List, and "Done with this step" is the block's one Shine Button. For repair jobs, case handling and any short task list.
FAQ
How do I change the steps?
TASKS lists each step with its id, a title, a sentence and its labour in tenths of an hour. The chips' words, the "Booked so far" row and the total in the header are worked out from the step number and those hours. Chips wrap, so you can add steps without changing the layout.
What stays local, and how do I make it real?
Everything. The step is component state, and closing the job ends on a note that says nothing was invoiced. To make it real, send the step from advance to your API and invoice from the last press.
How does the chip show state without colour?
With a shape and a word: a check and "Done" for finished steps, a filled chip and "Now" for the current one, a hollow dot and "Next" for the rest. The words are real text, so they are read aloud with the name.
How does the keyboard work?
The chips are one tab stop on the current one. Arrow keys move between the chips you can reach, Home and End jump to the ends, and Enter or Space opens the focused one. Chips ahead of the furthest step reached are disabled.