shadcn.io is not affiliated with official shadcn/ui
Nested Substeps Stepper Block for React
A caterer's event-day plan with Setup, Service and Teardown as steps that each hold three or four ticked tasks, a count such as Setup 3 of 4 on every step and one count for the whole day.
Installation
Overview
Give each step its own to-do list, with this nested stepper for React with Base UI. A hairline frame with plus marks opens on a Progress bar and a count, "5 of 11 tasks". Below it a numbered rail at the start lists three steps (Setup, Service and Teardown), each with a count worked out from its tasks ("Setup 4 of 4") and a check once all of them are ticked, and the open step's panel at the end lists its tasks as Checkboxes. Ticking changes the step's count, its check and the day's total; you can open any step at any time. "Next step" is the block's one Shine Button, and on Teardown it closes the day once every task is ticked. For event days, launch checklists and any plan where a step is a group of small tasks.
FAQ
How do I add steps and tasks?
Edit PHASES at the top of the file: each step has an id, a title, a line of lead text and a list of tasks. The rail, the counts, the total and the bar are all drawn from it, so nothing is typed twice.
When is a step done?
When all of its tasks are ticked. It is never marked by moving on: skipping to Service with Setup half done leaves Setup showing "Setup 2 of 4" and no check.
Why does Close the day say Tick more tasks?
The last step can only close the day when every task in all three steps is ticked. The button is marked aria-disabled rather than disabled, so it stays focusable, and pressing it says how many tasks are left.
What stays local?
The ticks and the current step are component state, lost on reload; nothing is saved or sent to the crew. To keep them, store the ticks array against the event in the toggle handler and load it into the initial state.