shadcn.io is not affiliated with official shadcn/ui
Dual Track Stepper Block for Radix UI
A product-launch planner with Marketing and Warehouse lanes of four steps each, a bridge where printing labels waits for the launch date, and a Launch day step that opens when both are done.
Installation
Overview
Run two teams that depend on each other in one place, with this dual-track stepper for React with Radix UI. A hairline frame with plus marks holds two lanes of four steps, Marketing above and Warehouse below, each with its own count and its own "Complete next step" button. A bridge links them: the Warehouse's third step, Print the labels, needs the Marketing step Set the date. Until that is done the Warehouse lane stops on the step, shows a lock, and the lane says "Waiting for Marketing: Set the date"; pressing its button says the same. When both lanes are finished the Launch day step opens, and "Launch the box" is the block's one Shine Button. Nothing is shipped. For launches, hand-offs between teams and any plan with one cross-team dependency.
FAQ
How is the bridge defined?
Two constants at the top of the file: BRIDGE_STEP, the Warehouse step that waits, and BRIDGE_NEEDS, how many Marketing steps must be done first. needOf and waitOf read them, so the lock, the "needs" line, the lane's message and the drawn bridge all change together.
Can I complete steps in any order?
No: each lane moves one step at a time with Complete next step. The lanes are independent of each other apart from the bridge, so either can run ahead until it reaches the dependency.
When does Launch day open?
When both lanes have all four steps done. Pressing the button earlier says to finish both lanes first. After launching, the button becomes Start over, which clears both lanes.
What stays local?
The two counts and the launch are component state, lost on reload; nothing is scheduled, printed or shipped. To make it real, load each lane's done count from your project and call your API from complete and launch.