shadcn.io is not affiliated with official shadcn/ui
Vertical Numbered Stepper Block for Ark UI
A brew-day guide with a numbered rail at the start and the open step at the end, where ticking two tasks and pressing Mark step done opens the next step.
Installation
Overview
Guide someone through a job done in order, with this vertical stepper for React with Ark UI. A hairline frame with plus marks holds a Steps rail at the start, five numbered circles joined by a line that fills downward (Sanitise, Mash, Boil, Ferment and Bottle), each with its duration, and the open step's panel at the end behind a divider. A panel has two lines of method, a Data List of the time and temperature, and a Checkbox for each of its two tasks. "Mark step done" is the block's one Shine Button: it stays quiet until both tasks are ticked, then completes the step, opens the next one and moves focus to its heading; pressed early, it says how many tasks remain. The last step ends on "Brew day done in this demo". On a phone the rail becomes a row of numbers above the panel. For recipes, runbooks, setup guides and checklists.
FAQ
How do I add my own steps?
Edit STAGES at the top of the file: each has an id, a title, a short summary for the rail, a paragraph of method, a time, a temperature and a list of tasks. The rail, the panels, the ticks per step and the closing counts are all drawn from it, so nothing is typed twice. The temperature is printed as given; use whatever unit your guide uses.
What makes a step done?
Pressing Mark step done once its tasks are ticked. Until then the button is marked aria-disabled rather than disabled, so it keeps its place and stays focusable, and pressing it names how many tasks to tick. Going back to an earlier step is free; the rail only offers steps you have reached.
What stays local?
The ticks and the current step are component state and are lost on reload; nothing is saved or sent. To keep them, store the ticks array against the user or the batch in the toggle handler and load it into the initial state.
How does the keyboard work?
The rail is one tab stop on the current step. Up and Down arrows move between the steps you can reach, Home and End jump to the ends, and Enter or Space opens the focused step. Tab then continues into the panel's checkboxes and the button.