shadcn.io is not affiliated with official shadcn/ui
Vertical Icons Stepper Block for React
A garden plot application with the icon rail at the end and the panel first, where a step is done only when its two tasks are ticked and Continue says how many remain.
Installation
Overview
Let work, not a click, finish a step, with this vertical icon stepper for React with Base UI. A plus-marked frame puts the step's panel first and a Steps rail of four icons at the end: a map for Choose a plot, a signature for Sign the rules, a calendar for Book an induction and a key for Collect keys. A panel has a heading, a Badge counting its tasks, one sentence and two Checkbox tasks. A step is done only when both are ticked, and its indicator then turns from the icon into a check. Continue is the block's one Shine Button: while a task is open it stays in place but quiet, and the status line beside it says "1 task to go in Sign the rules". On a phone the rail becomes a row of icons above the panel. For applications, onboarding and checklists where each stage has things to do.
FAQ
How is a step marked done?
By its tasks, not by moving on. remainingOf counts the unticked tasks of a step, and a step with none left shows the check in its indicator and "Done:" in front of its title for screen readers. If you go back and untick a task, the step reads as open again and Continue is quiet until it is finished.
Why is Continue not disabled?
A disabled button can't be focused or explain itself. It is marked aria-disabled instead, so it keeps its place and focus, and the reason sits beside it in the polite status line: "2 tasks to go in Choose a plot". Pressing it while tasks remain does nothing, and the rail refuses to jump ahead for the same reason.
How do I add steps or tasks?
Edit STAGES: each step has an id, a title, a one-line summary for the rail, an intro sentence and a list of tasks, and the badge, the rail and the counts follow. A step can have any number of tasks; the block shows two. Add the icon for a new step in StageIcon.
What stays local?
The ticks and the current step are component state. Nothing is reserved, signed or booked, and the last step says so: "Applied in this demo". Save ticks from toggle to keep them between visits, and submit them from advance on the last step.