A rotary dial you flick. It spins with inertia, clicks into detents while the readout snaps to each one, and a comet tail follows the pointer around the rim.
Thermostat
Living room
Flick the dial.
It clicks into place.
npx shadcn@latest add https://hyperblur.dev/r/micro-comet-dial.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/micro-comet-dial.tsx.
import { MicroCometDial } from "@/components/hyperblur/micro-comet-dial"
<MicroCometDial label="Temperature" labels={["16°", "17°", "18°", "19°"]} detents={4} onChange={(i) => setTemp(i)} />| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | Controlled detent index from 0 to detents minus 1. Pair with onChange. | |
| defaultValue | number | 0 | Initial detent index when uncontrolled. |
| detents | number | 12 | Number of stops around the full circle. |
| labels | string[] | Readout text for each detent. Falls back to the zero-padded index. | |
| size | number | 152 | Dial diameter in pixels. |
| accent | string | "#2f7bff" | Notch, active tick and comet color. |
| label | string | "Dial" | Accessible name of the slider. |
| idle | boolean | true | Flick the dial on its own now and then, and let it ease back to the value, until the pointer or focus arrives. |
| onChange | (value: number) => void | Called with the new detent index when you move the dial or press an arrow key. | |
| className / style / ...rest | HTMLAttributes<HTMLDivElement> | Forwarded to the root element, which carries role slider. |