shadcn.io is not affiliated with official shadcn/ui
Vertical Steps Journey Block for Svelte
A customer journey section for a CRM: the first 90 days as a vertical stepper with the catalog Steps, each stage with its timing, its hands-on time and its key action, and a line that says which stage you are in.
Installation
Overview
A customer journey section for Svelte with Ark UI, written for Footholdly, a fictional CRM for small sales teams. A split: at the start, the header and, at its foot, a "you are here" line; behind a divider at the end, six stages of the first 90 days as the catalog's vertical Steps, Import, Connect, Pipeline, Habit, Team and Review, each with where it falls, how long it takes by hand and the one thing to do. Rows take alternate tints, and the stages before the one you pick tick off and join up on the rail. The line at the start follows your choice and says how you know that stage is done, one panel per stage. On a phone the stepper sits under the header and the "you are here" line closes the block. It's built from Steps and Guides, with a CSS entrance and your theme's tokens for every colour; done and current stages take foreground tones, so the page keeps one primary control. For onboarding pages, customer success hubs and any product with a first quarter worth planning. The timings are example data.
FAQ
How do I change the stages?
The stages are STAGES at the top of the file: each has a title, a when, an effort, an action, a done line (how you know it is finished) and an id. The stepper, its count and the "stage 3 of 6" line are all computed from the list, so you can add or remove a stage. Keep when in relative time ("Week 2", "Day 90"), so the page doesn't go stale. The initial stage is useState(2): change it to start somewhere else.
Is this a real stepper or just a styled list?
It's the catalog's Steps in vertical orientation, so each stage is a real control. Choosing a stage makes it the current one, and the stages before it complete and tick off. Because the stages aren't a form, there is no Next button and nothing blocks you from jumping: Steps isn't set to linear. The stage's text lives in its trigger, so the whole row is the target, and each stage's "done when" line is the Steps panel its trigger controls.
How does it work with a keyboard and a screen reader?
Tab moves onto the list's one stop, the current stage; the up and down arrow keys move between stages, Home and End jump to the ends, and Enter or Space makes the focused stage the current one. The "you are here" line is a polite status, so changing the stage announces it; the chosen stage's "done when" panel sits right under it. The stage's timing and key action are read as part of its trigger.
What happens on a phone?
The split stacks: the header first, then the stepper as a band ruled from rail to rail with each row full width, then the "you are here" line, which closes the block. The rail and the numbers stay at the start of each row, the text wraps beside them, and nothing scrolls sideways at 320 pixels.