shadcn.io is not affiliated with official shadcn/ui
Radial Dial Wheel Selector Features Block for React Aria
A six-wedge dial for a model router: choose a skill and the needle turns to its wedge, the hub rolls to its score, and a list beside the dial shows all six with the model each goes to.
Installation
Overview
A dial features section for React with React Aria. A ring of six wedges, drawn in SVG with hairline outlines and a tick-marked rim, has one skill in each (Reasoning, Tools, Vision, Memory, Code, Audio). Choosing a wedge turns the needle to it, the short way round, and the hub in the middle rolls to that skill's score. Beside the dial, in a cell that shares one hairline with it inside a rounded frame, a list shows all six skills with a score bar and the model each is routed to; the chosen row is tinted. Below lg the list drops under the dial. It's built from Sliding Number and Guides, with a CSS transition for the needle and your theme's tokens for every colour. For routers, capability profiles and any feature that is really six numbers around a circle.
FAQ
How do I change the skills and scores?
Edit SKILLS at the top of the file: each has a name, a one-line description, the model it routes to and a score from 0 to 100. The wedges are laid out from the array's length, each taking an equal share of the circle, in order from the top and clockwise; six reads best, and fewer or more only changes the angle.
How does the needle turn?
It keeps a running angle and moves to the chosen wedge by the shortest turn, so going from Audio to Reasoning steps one wedge forward instead of sweeping back across the dial. It is a CSS transition on rotate, and with reduced motion the needle jumps and the hub's digits change in place.
How do I use the dial with a keyboard?
The wedges are one group of radio buttons: Tab puts focus on the chosen wedge and the arrow keys move to the next or previous one, choosing it as they go. The focused wedge gets a heavier outline. Each wedge's description points at its row in the list, so a screen reader hears the score and the model.
Do I have to use the dial to read the scores?
No. The list beside it has every skill's score and model as text, in order, so nothing is only in the drawing. The hub and the rim are hidden from assistive technology.