shadcn.io is not affiliated with official shadcn/ui
Single Line Stepper Block for Ark UI
A returns desk whose four steps are one running sentence of words in the header, where done words are struck through, the current one is underlined and a reached word is a button.
Installation
Overview
Put the steps in a sentence, with this single line stepper for React with Ark UI. The header band of a framed panel reads like a line of text: Pack, Label, Collect, Refund, built on Steps. Done words are struck through with a check and an unseen "Done: ", the current word is bold and underlined and later words are muted. A word you have reached is a button, and the line wraps like any sentence on a phone. Under it one sentence says what to do now, and a "Done with Label" button strikes the word and moves on; the last step records "Refund recorded in this demo". For returns, checklists and any process short enough to say in a line.
FAQ
How is the state told apart without color?
By the shape of the word: a check and a strike for done, bold and a thick underline for the current one, and plain muted text for later ones. Screen readers hear "Done: Pack" for finished steps.
Which keys work?
Tab lands on the current word, the arrow keys move along the words you have reached and Enter or Space opens one. The button in the foot moves on; the new step's heading takes focus.
What happens when the line is longer than the screen?
It wraps onto a second line like a sentence, with the chevrons between words kept. The panel below keeps a minimum height, so the foot does not jump when the line wraps.