shadcn.io is not affiliated with official shadcn/ui
Optional Skippable Stepper Block for Vue
A library card application with a vertical rail where optional steps have a dashed ring, a Skip button, and a review that lists what was skipped with an Add now button.
Installation
Overview
Let people skip what they may skip with this stepper for Vue with Ark UI. A plus-marked frame holds a vertical Steps rail of five steps for a public library's card application, with the open step's panel beside it. Only the name is required; Address proof, Reading interests and Newsletter are optional, so they have a dashed ring and the word "Optional". Skip turns a step to "Skipped" (a dash in the ring, a struck-through title, a dashed connector) and clears what was in it. The Review lists each skipped step with an "Add now" button that returns to it. "Continue" is the block's one Shine Button. On a phone the rail becomes a row of rings above the panel.
FAQ
How do I make a step optional or required?
Set optional on its entry in STAGES. Optional steps get the dashed ring, the Skip button and the "Optional" word; filledOf says what counts as having something in a step.
Why does a skipped step not get a check?
Because done is drawn from the answers, not from the step. The catalog indicator shows a check for every step before the open one, which would call a skipped step done, so the block draws its own ring: a check, a dash, or the number.
What happens if I press Continue on an empty optional step?
It stays and says "Add something to Address proof, or press Skip." Skipping is always an explicit choice, never a side effect of moving on.
What stays local?
The answers are component state and are lost on reload; no card is issued and nothing is sent. To make it real, submit the answers from the last step to your API and keep skipped in your draft.