shadcn.io is not affiliated with official shadcn/ui
Minimal Line Stepper Block for Radix UI
A hairline ruler with five ticks for a letterpress job, where the current tick is long and named, the ends are named and the line turns from dotted to solid as you go.
Installation
Overview
Show progress with almost nothing, with this minimal line stepper for React with Radix UI. A framed block of white space holds one hairline with five ticks, Proof, Set, Print, Trim and Ship, built on Steps. The current tick is long and darker and carries its name; the two ends carry theirs and the others stay bare. The line is solid up to the current tick and dotted after it. Ticks you have reached are buttons, the arrow keys move between them, and a single sentence says what the current stage is. Back and Next are two plain text buttons, and Next names what it opens: "Next: Print". For print jobs, order tracking and any flow where the content should lead.
FAQ
Why are only some ticks named?
Naming every tick would fill the line. The current stage and the two ends are enough to read where you are, and every tick still has its name for screen readers, so nothing is lost for them.
How is the line solid then dotted?
Each separator is a top border. Completed ones are solid in the foreground color and the rest are dotted in a muted one, so the change is in the line style and not only its color.
Which keys work?
Tab lands on the current tick, the left and right arrows move focus along the ticks you have reached (swapped in right-to-left), and Enter or Space opens the focused stage. Ticks ahead of the furthest stage are off.