A knurled hardware knob inside a 270 degree ring of LED segments. Drag up or down to turn it, hold Shift for fine control, scroll while focused, and double click to mute.
Now playing
Low Tide Signals
Harbor Lights · 3:42
npx shadcn@latest add https://hyperblur.dev/r/micro-volume-knob.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/micro-volume-knob.tsx.
import { MicroVolumeKnob } from "@/components/hyperblur/micro-volume-knob"
<MicroVolumeKnob defaultValue={64} label="Master" onChange={setVolume} />| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | Controlled value. Pair with onChange. | |
| defaultValue | number | 62 | Initial value when uncontrolled. |
| min | number | 0 | Lowest value. |
| max | number | 100 | Highest value. |
| step | number | 1 | Value snapping step. |
| segments | number | 23 | Number of LED segments in the ring. |
| size | number | 128 | Diameter of the knob and ring in pixels. |
| label | string | "Volume" | Accessible name and caption under the readout. |
| accent | string | "#2f7bff" | LED and indicator color. |
| muted | boolean | Controlled mute state. Pair with onMutedChange. | |
| defaultMuted | boolean | false | Initial mute state when uncontrolled. |
| disabled | boolean | false | Block interaction and dim the knob. |
| onChange | (value: number) => void | Called with every new value. | |
| onMutedChange | (muted: boolean) => void | Called on double click or the M key. | |
| className / style / ...rest | HTMLAttributes<HTMLDivElement> | Forwarded to the root element. |