shadcn.io is not affiliated with official shadcn/ui
Account Setup Stepper Block for React Aria
A language-learning profile setup whose rail echoes your answers under each finished step (handle, daily goal, reminder), with a checked handle field and a final review.
Installation
Overview
Let people watch their setup take shape with this account-setup stepper for React with React Aria. A hairline frame with plus marks holds a vertical Steps rail at the start (Handle, Daily goal, Reminder and Your setup) and the form at the end. Each finished row prints what was chosen under its title: "Handle @marta", "Goal 15 min a day", "Reminder 19:00". The handle is an Input with its rule shown and checked on "Save and continue", the block's one Shine Button: it wants 3 to 20 lowercase letters, digits or underscores and refuses a handle that is already taken. The goal is a Radio Group of four cards, the reminder a Select of times, and the last step lists all three before "Finish setup". On a phone the rail becomes a row of numbers with "Step 2 of 4" and the echoes as chips under it. The setup has no email or password; those belong to a sign-in flow. For profiles, preferences and first-run personalisation.
FAQ
How does the rail know what you chose?
Saving a step copies its answer from the draft into kept, and each row prints its own line from kept through echoOf. Going back to a finished step and saving again rewrites the line. Drafts you never saved don't show in the rail.
How is the handle checked?
handleProblem runs on "Save and continue" on the first step: it must not be empty, must match HANDLE_RULE and must not be in TAKEN. The problem shows under the field in a reserved line, the status line says the handle needs a fix, and focus returns to the field. Typing clears it and lower-cases the text.
What stays local, and how do I wire it for real?
Everything: the answers are component state and "Finish setup" only shows "Profile saved in this demo". Replace the TAKEN check with a request to your handles endpoint, and post kept in the advance handler when step is the last one.
How does the keyboard work?
The rail is one tab stop on the current step, arrow keys move between the steps you have reached and Enter opens one. Enter inside the handle submits the step, and after each move focus lands on the new heading.