shadcn.io is not affiliated with official shadcn/ui
Setup Wizard Onboarding Block for Radix UI
A team workspace's first-run wizard as a whole screen: a rail of four steps (account, workspace, invites) that ends on a recap of every answer with an Edit button per section, and a Continue that checks each step first.
Installation
Overview
Walk a new customer through setup and let them check it before it is real, with this wizard for React with Radix UI. It is a whole screen of Gangwayby, a team workspace: the page's rails and one band split in two. The start half has the product, the heading and a vertical Steps rail (on a phone it is "Step 2 of 4" over a hairline of progress); the other half holds one step at a time. Account takes a name and work email, Workspace its name and whether it is for a team or just you, Invite email addresses as chips in a Tags Input, and All set reads every answer back in a Data List with an Edit button on each section that jumps to its step. The one Shine Button is Continue, then Open workspace; it checks the step first and puts the first problem in focus. For product onboarding, workspace creation and any first run with a few decisions to review.
FAQ
How do the steps and the rail work?
The rail is a vertical Steps list driven by one step number. A step you have not reached is disabled; one you have can be reopened from the rail (or with Back), and moving on checks the step you are on. Only the current step's page is on screen, each in the same space so the page does not jump. On a phone the rail is replaced by "Step 2 of 4" and a hairline of progress.
What does Continue check?
Only the fields on the current step, in order: name (two letters or more), a full work email, and the workspace name (two to thirty characters). Each problem shows in its own reserved line under its field, the first one takes focus, and a short status line says to fix it. Invites are optional and every chip is already a valid, unique address, because the field refuses anything else and says why.
How does the recap edit things?
Each recap section has an Edit button named for it ("Edit account"). It opens that step with its first field in focus, and the main button then reads "Back to review" so one press takes you straight back to the recap instead of through every step. Open workspace checks all the answers once more and, if one is wrong, sends you to the step that holds it.
What stays local in the demo, and how do I wire it?
Everything: no account, workspace or invitation is created and nothing is sent; Open workspace only says "Opened in this demo". In your app, post the answers from open, treat the invite list as a request to your mailer, and keep reached on the server if people may leave and return.
Can I use it from the keyboard?
Yes. Enter in a text field presses Continue. In the invite field Enter or a comma adds a chip and Backspace removes the last. The rail is one tab stop that follows the current step, with the arrow keys moving between steps you can open, and each new step takes focus on its heading so a screen reader announces where you are.