shadcn.io is not affiliated with official shadcn/ui
Circular Wheel Stepper Block for Solid
A product iteration cycle as a ring of six phases that loops, where each phase is a button on the ring and finishing Iterate starts the next cycle at Plan.
Installation
Overview
Show a process that repeats, with this wheel stepper for Solid with Ark UI. A plus-marked frame holds a ring of six arcs with a gap between each, one per phase: Plan, Design, Build, Test, Ship and Iterate. Done arcs and the open one are solid, the open one heavier, and the rest are faint. Each Steps phase is a numbered button on the ring, with its name beside it, and the middle says which cycle and phase you are in. The pane beside the ring gives the phase's owner, its days and how far through the cycle you are in a Data List. After Iterate, the block's one Shine Button says "Start the next cycle", moves back to Plan and counts "Cycle 2". On a phone the ring sits above the pane with numbered nodes. For release cycles, sprints, review loops and any work that comes round again.
FAQ
How do I change the phases?
Edit PHASES: each has a title, a one-line blurb for the middle of the ring, a sentence, an owner and a number of days. The ring is divided evenly by the number of phases, and the arcs and node positions are worked out from RADIUS and the phase's place, so adding a phase only means adding an entry and changing the 60 degree step in middleOf.
How does the loop work?
On the last phase the button resets the furthest phase reached to the first one, moves to Plan and adds one to the cycle count. Nodes you have not reached in the new cycle are off again, so a cycle has to be walked round each time. Back stops at Plan; it does not step into the last cycle.
What stays local?
The phase and the cycle count are component state and are lost on reload. Nothing is scheduled. To make it real, store the cycle number and phase against your project and read them into the initial state.
How does the keyboard work?
The nodes are one tab stop on the open phase. Arrow keys move between the phases you can reach in the order of the ring, Home and End jump to the ends, and Enter or Space opens the focused one. The pane's heading takes focus after you move and a polite line says "Cycle 1, phase 3 of 6: Build".