shadcn.io is not affiliated with official shadcn/ui
Building Blocks Stepper Block for React Aria
A stack of five offset blocks for the stages of a self-build, with laid courses solid, the next course outlined, a panel for the open course and one Shine Button to lay it.
Installation
Overview
Stack the stages of a build with this building-blocks stepper for React with React Aria. A hairline frame with a plus mark on each corner holds a Steps column of five blocks offset like brickwork: Foundation, Structure, Interior, Finishing and Inspection. A laid course is solid with a check, the course to lay next is a dashed placement outline marked "Laying", and the rest are ghosted. The stack runs top-down in the same order as the keyboard, and each block is a real button, so a laid course can be reopened. The panel beside it holds the open course's crew, material and duration in a Data List, and "Lay this course" is the block's one Shine Button. On a phone the stack sits above the panel in shorter blocks. For build, install and rollout flows that are built layer on layer.
FAQ
How do I change the courses?
COURSES lists the five courses with an id, title, a sentence, the crew, the material and the duration. The completed panel counts the courses from the list. To add a course, add it to COURSES; the stack and the panels follow.
What stays local, and how do I make it real?
Everything. The course is component state and the last step ends on "Build complete in this demo": no certificate is issued and nobody is told. To make it real, call your API from the advance handler with the plot and the course you are laying.
Why is the stack not upside down?
A real wall is laid from the bottom, but here the stack runs top to bottom in reading order so that Tab, the arrow keys and what you see agree. The brick offset and the "Laying" outline tell you which course is next.
Does it work right to left?
Yes. The offset on every second block uses a logical margin, so the bricks step toward the end of the line in either direction, and the panel sits on the correct side.
How does the keyboard work?
The stack is one tab stop on the current course. Up and Down move focus between the courses you can reach, Home and End jump to the ends, and Enter or Space opens the focused one. After a move the course heading takes focus and a polite line reads "Course 2 of 5: Structure".