shadcn.io is not affiliated with official shadcn/ui
Parallel Tracks Stepper Block for Ark UI
A harvest planner with Field, Pack and Haulage as three independent rows of tickable steps, each with its own bar, and lines that meet at a Market day node opening when all three are done.
Installation
Overview
Track work that happens at the same time, with this parallel-tracks stepper for React with Ark UI. A hairline frame with plus marks holds three rows, Field, Pack and Haulage, each with its own Progress bar, a count and three or four steps to tick with a Checkbox in any order. No row depends on another. Lines run from the end of each row to a Market day node that stays locked until all three rows are complete, and a sentence names the track that is last, worked out from the ticks. "Open market day" is the block's one Shine Button. For harvests, launches, audits and any job with crews that finish on their own clock.
FAQ
How do I add a track or a step?
Add a Track to TRACKS (an id, a title and its steps). The rows, the bars, the lines to the node, the total and the "last track" sentence are drawn from the list. The lines assume three rows; for another number, change the three paths in Merge.
How is the last track chosen?
It is the track with the most steps left. If two tie, the sentence names both ("Pack and Haulage are the last tracks"), and when nothing is left it says all three are done.
When does Market day open?
When every step of every track is ticked. Pressing the button earlier says what is left. After it opens, the button becomes Start over, which clears every tick.
What stays local?
The ticks and the opening are component state, lost on reload; nothing is scheduled or sent. To keep them, store the ticks array against the harvest in the tick handler and load it into the initial state.