shadcn.io is not affiliated with official shadcn/ui
Onboarding Stepper Navbar Block for Svelte
Wizard chrome in one bar: Save and exit at the start, four steps in the middle (finished ones take you back), and Back and a Shine Continue at the end that really advance the step, over a hairline that fills as you go.
Installation
Overview
Wizard chrome for Svelte with Ark UI, the bar above a setup flow in an onboarding builder called Rampup. It is one bar, 56 pixels tall, in cells that share hairlines, each divider meeting the top rule with a plus. At the start, Save and exit: it saves the progress and the button says "Progress saved" for a moment. In the middle, the four steps (Account, Connect data, Invite team, Launch) as a Steps list: the finished ones are buttons that take you back to them, the current one is filled, the later ones are inert. At the end, Back and a Shine Button, Continue, which really advances the state ("Finish setup" on the last step, then an Open workspace link). A hairline on the bar's bottom edge fills as steps are done. On a phone the list gives way to "Step 2 of 4, Connect data" and the two buttons keep their place. It differs from the numbered-steps banners, which show a stepper with a Resume button: this is the chrome you keep above the steps' own content. It's built from Steps, Shine Button, Button and Guides, with your theme's tokens for every colour.
FAQ
How do I change the steps?
Edit STAGES at the top of the file (an id and a title each) and START, the zero-based step it opens on. COUNT follows the list, and so do the fill on the bottom edge, "Step 2 of 4" and the last step's "Finish setup". The block holds the step in its own state; connect it to your wizard's state (or router) by changing goTo. The step's own content goes below the bar: the Steps root is the bar's column, so a step's StepsContent can sit in your page if you move the root up.
What do Continue, Back and Save and exit do?
Continue moves one step on and Back one step back (Back is inert on the first step, with aria-disabled so focus stays). Past the last step the setup is complete: the steps all show as done, the fill reaches the end, and Continue becomes an Open workspace link. Save and exit changes its label to "Progress saved" for two seconds and says so in a polite status; nothing is stored or sent, and the block can't leave the page, so wire both to your own save and navigation.
Are finished steps really links?
They are the Steps list's own buttons (it follows the tabs pattern: one tab stop, arrow keys move between the steps), so choosing a finished one goes back to it. They are styled to read as links on hover. Steps after the current one are disabled so a wizard never jumps ahead.
How does it work with a keyboard and a screen reader?
Tab reaches Save and exit, then the step list (one stop: the current step), then Back and Continue. Arrow keys move between the steps, Home and End jump to the ends, and Enter or Space opens a finished one. Every move is announced in a polite status ("Step 3 of 4: Invite team.", "Setup complete."), and the current step's panel holds its words ("Step 3 of 4", its name) for a screen reader.
How does it work on a phone?
Below the md breakpoint the list is hidden and the current step's panel shows instead: "Step 2 of 4" over its name. Save and exit, Back and Continue keep their place, with Save and exit and Back as icons that keep their names. Nothing wraps at 320 pixels.