shadcn.io is not affiliated with official shadcn/ui
Journey Steps Mentorship Pair Team Block for Svelte
One mentoring pair of a leadership program and where they are on their journey: the mentor and mentee, their cadence and topics, and four read-only steps with the week of each, two done, one current and one to come.
Installation
Overview
A mentoring journey for Svelte with Ark UI, for Foxcombe, a leadership program. A split with a hairline divider shows one pair. At the start, a header ("Week 8 of 16, and the midpoint review is next"), the mentor and the mentee as initials avatars with their roles, how often they meet ("Every other Thursday, 45 minutes") and the topics they chose as chips. At the end, the catalog's Steps drawn read-only as four milestones: Kickoff, Goals set, Midpoint and Review, each with its week and a line about what happens at it. The first two are ticked, the Midpoint carries a halo as the one the pair is at, and the Review waits. The steps run across the end cell from lg, with the marker and rail on one line and the words under it, and down it on a phone with a rail between the markers. It's built from Steps, Badge, Avatar and Guides, with your theme's tokens for every colour. For a leadership programme, a mentoring scheme or a member page that shows one pair at a time. The people are invented.
FAQ
How do I change the pair, the milestones and where they are?
Edit MENTOR, MENTEE, TOPICS and MILESTONES at the top of the file. A milestone is a title, a week and a note. AT is the index of the step the pair is at: the steps before it are drawn as done, that one as current and the rest as up next. Change AT and the markers, rails and spoken states all follow. If you add or remove a milestone, change the four-column grid of the list to match.
Are the steps buttons?
No. The markers are not interactive: the journey shows where a pair is, it doesn't move them. Each list is a plain list of four items, the current one marked as the current step, and each name is preceded by hidden text that says "Done:", "Where they are now:" or "Up next:", so the state isn't carried by the marker alone.
Why are the steps in the page twice?
The steps run across at lg and down below it, and Steps has one orientation at a time, so the block holds two lists with the same content and CSS shows the one that fits. The other is hidden from the keyboard and from assistive technology, so nothing is read twice.
Does it follow right-to-left languages?
Yes. The markers and rails run from the end of the page's reading direction, the vertical rail is positioned with logical offsets so it stays under the markers, and the weeks are wrapped so "Week 8" keeps its order.