shadcn.io is not affiliated with official shadcn/ui
Auto Advance Stepper Block for Vue
A four-step dough schedule whose steps move on by themselves, with a ring that fills as each step's time runs out, a Pause and Resume button, Skip step and a polite line.
Installation
Overview
Let a process run on a clock without taking control away, with this auto-advancing stepper for Vue with Ark UI. A hairline frame with plus marks holds a Steps line of four numbered circles (Mix, Rest, Shape and Bake), and the circle of the running step is wrapped by a ring that fills as its time runs out. The clock is sped up in this demo (3, 5, 2 and 4 seconds) and starts paused: the block's one Shine Button starts it, pauses it and resumes it, and an outline "Skip step" button moves on at once. Each panel is a Data List of the time the step takes in the kitchen and in the demo, with the time left in the step and in the whole run. Steps you have reached can be pressed to run again. A polite line names the step when it changes and says when the clock is paused. For timed procedures, runbooks, onboarding tours and kitchen or lab schedules.
FAQ
How does the clock work?
One interval, started only while the block is running, ticks every 100 ms and either lowers the time left or moves to the next step. Pausing clears it, so a paused schedule uses no time at all. Edit secs on each entry in STAGES to change a step's length; the ring, the countdown lines and the totals are all drawn from it.
What about people who dislike motion?
Nothing runs until the button is pressed, so there is no surprise movement on load, and Pause is always on the page. The ring has no animation of its own and the countdown is plain text, so with reduced motion the block looks the same. The countdown is hidden from screen readers while it ticks; a still sentence in each panel carries the time left instead, and the polite line only speaks when the step changes or the clock stops or starts.
What do Skip step and the circles do?
Skip step ends the current step now and starts the next one's clock. A circle for a step you have already reached takes you back to it with its full time on the clock; later steps stay off until the schedule gets to them. Moving by hand never moves focus away from the button or circle you used.
What stays local?
The clock, the current step and the furthest step reached are component state, lost on reload. Nothing bakes and nothing is sent. To drive a real process, replace the tick with a server-sent progress event, or store the start time and compute the time left from it so a reload keeps the place.