Browse components
Comet Dial
A drag-around knob whose indicator trails a glowing comet tail, with a live readout and full arrow-key support.
Installation
npx shadcn@latest add @glint-ui/comet-dialFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/comet-dial.json
Usage
import { CometDial } from "@/components/ui/comet-dial";
const [volume, setVolume] = useState(40);
<CometDial value={volume} onChange={setVolume} label="Volume" unit="%" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | number | 40 | Initial value when uncontrolled. |
| min | number | 0 | Lowest value. |
| max | number | 100 | Highest value. |
| step | number | 1 | Value increment. |
| color | string | "#38bdf8" | Comet and arc color. |
| size | number | 220 | Diameter in px. |
| label | string | "Volume" | Caption and accessible name. |
| unit | string | "%" | Suffix after the number. |
| disabled | boolean | false | Disable interaction. |
| value | ReactNode | — | Controlled value. Pair with onChange. |
| onChange | ReactNode | — | Called with the new value. |
| className | string | — | Extra classes for the root element. |