shadcn.io is not affiliated with official shadcn/ui
Horizontal Numbered Stepper Block for React Aria
A five-step loft-conversion wizard on a numbered line that fills as you go, with one real choice per step, free Back, and one Shine Button to continue.
Installation
Overview
Show people where they are in a short flow, with this horizontal stepper wizard for React with React Aria. A hairline frame with a plus mark on each corner holds a Steps line of five numbered circles: Brief, Survey, Permits, Build and Handover. The line fills in foreground tones as steps are completed, and the circles you have reached are buttons, so Back is free while later steps stay off until you get there. Each step asks one thing: a Radio Group of three extension types, a Switch for a drainage survey, a Data List of the approvals the choice needs, a Select for the start month, and a read-back of everything chosen. The foot has an outline Back and the block's one Shine Button. After each move the new step's heading takes focus and a polite line says "Step 3 of 5: Permits". On a phone only the numbers show, with the step's name in a line under them. For onboarding, setup and planning flows of any product.
FAQ
How do I change the steps and the choices?
STAGES lists the five steps by id and title, and KINDS lists the extension types with their blurb, build time in weeks and the approvals each needs. Everything on the read-back is worked out from the choices: the weeks on site add a week when the survey is on, and the approvals follow the chosen type. To add a step, add it to STAGES, add a StepsContent with the next index, and give it a heading with an id from headingId.
What stays local, and how do I make it real?
Everything. The choices live in component state, and the last step ends on a plan that says "Planned in this demo": nothing is booked and no builder is contacted. To make it real, send kind, survey and month from the advance handler on the last step to your API, and show its answer in the final panel in place of the sentence.
How does the keyboard work?
The step line is one tab stop on the current step. Arrow keys move focus between the steps you can reach, Home and End jump to the first and last, and Enter or Space opens the focused one; in a right-to-left layout the horizontal arrows swap. Steps ahead of the furthest one reached are disabled, so the only way forward is Continue.
Where does focus go after a move?
Nothing takes focus on load. After Continue, Back or a press on a reached step, focus goes to the new step's heading, which is focusable by script only, and the status line in the foot is read out. The final button is the same Shine Button relabelled, so focus stays on it from step to step; after the last step it reads Start over.
How does it look on a phone?
The titles are hidden visually but still read by screen readers, and a line under the circles shows "Step 2 of 5: Survey". The foot sticks to the bottom of the screen while the panel is in view, with Back and Continue side by side. Every step's panel keeps the same minimum height, so the foot does not jump as you move.