shadcn.io is not affiliated with official shadcn/ui
Role Selection Onboarding Block for Svelte
A role question as a stack of five cards, each with an icon and a line on what it opens first, a field inside Something else that waits at its height, and one sentence that says where the product will start you.
Installation
Overview
Ask who your new users are before they see anything else, with this role question for Svelte with Ark UI. It is a step of Banisterby, a team collaboration suite, as a whole screen: the page's rails and one band, a step header (“Step 2 of 6” and a hairline), and a framed panel with a Radio Group of five cards: Founder, Engineering lead, Designer, Operations and Something else, each with an icon and one line of what it opens first. The picked card is ringed in the foreground color. Something else holds an Input inside its card, switched off until that card is picked and kept at the same height so nothing moves. One sentence under the stack says where Banisterby will start you (“Banisterby will start you on the Roadmap, with this week's goals pinned above it”), and every pick rewrites it. Continue is the one Shine Button: without a role it says so and puts focus on the stack. Skip for now sits beside it. Nothing is saved.
FAQ
How do I change the roles?
Edit ROLES. Each role has an id, a title, the line on the card (opens), where the user starts (start) and what is added there (also); the sentence joins the last two as “will start you on {start}, with {also}”. Add the icon for a new role to RoleGlyph. Keep the id other for the card that has the field.
What is the sentence under the cards?
The page's one polite status. Before a pick it says to choose a role; after a pick it names the start view for it; after Continue it says “Saved in this demo” and repeats it. It is always at least two lines high, so a longer sentence never moves the buttons, and screen readers hear it each time a pick changes it.
What happens if I press Continue without a role?
Continue stays in the tab order and looks quiet until a role is picked. Pressing it, or pressing Enter on it, says “Choose a role to continue.” in a line under the stack that is always reserved, and puts focus on the first card. With Something else picked and fewer than three characters in its field, it asks you to say what you do in a few words and focuses the field.
How does the Something else field work?
It is always in the card, so the page never grows: it is switched off until that card is picked, then it takes typing. The text is not part of the sentence; it is yours to send with the answer. Picking another card switches it off again and keeps what was typed.
What stays local in the demo, and how do I wire it?
Everything. Continue says the role was saved in this demo and nothing leaves the page. In your app send role (and the field's text when the role is other) to your server where submit says so, open the view its response names, and keep the sentence as the preview of what was accepted. Skip for now says it was skipped and keeps what was picked.
How does it work from the keyboard and on a phone?
Tab reaches the stack as one stop and the arrow keys move between cards and pick them; Tab again reaches the field when its card is picked, then Continue and Skip. On a phone each card shows only its icon and name (the line stays for screen readers) and Continue sticks to the foot of the screen, so it is always in reach.