shadcn.io is not affiliated with official shadcn/ui
Collapsible Groups Stepper Block for React
A seven-step field protocol in three folding phases, each with its count and a small ring, where the phase holding the current step opens as you arrive.
Installation
Overview
Group a long list of steps into phases with this collapsible groups stepper for React with Base UI. A hairline frame with plus marks holds a rail at the start and the open step's panel at the end. The rail has three Collapsible rows (Preparation, Collection and Analysis), each showing how many of its steps are done and a small Circular Progress ring, and each holding a vertical Steps list of two or three steps. There is one current step for the whole protocol: the phase that holds it opens when you arrive, and any phase can be folded by hand. The panel shows the step's method and a Data List of its phase, time and gear. "Mark done" is the block's one Shine Button. On a phone the phases sit above the panel. For field protocols, release checklists and any process with named phases.
FAQ
How is this different from steps with tasks?
Here every item is a whole step and the groups are phases of one protocol, with one current step across all of them. In the nested sub-steps block a step is the parent and holds tasks you tick.
What happens when I fold the current phase?
It folds like any other, and its steps leave the tab order while it is folded. The panel still shows the current step, and moving to the next step opens the phase that holds it.
How do I change the phases?
Edit PHASES and STAGES: every step names its phase and its position in the whole protocol, and the counts, rings and panels are drawn from them.
What stays local?
The current step and which phases are open live in component state, and nothing is logged. In an app, write each step's completion to your record when Mark done is pressed.