audiocnKnob
A rotary control for dense layouts, drawn in SVG.
Installation
$ pnpm dlx shadcn@latest add @audiocn/knobUsage
import { Knob, KnobLabel, KnobValue } from "@/components/ui/knob";<Knob min={-24} max={24} origin={0} value={gain} onValueChange={setGain} />Grab the dial and circle around it: clockwise increases, anticlockwise decreases. It turns from where you grab it, stops at both ends, and turns finer the further out you circle. Set dragDirection="vertical" to drag up and down instead.
| Action | Result |
|---|---|
| Drag | Turns the knob |
| Shift+drag, Shift+wheel | Ten times finer, for precise adjustment. Press or release Shift mid-drag without a jump |
| Double-click the dial, Alt+click | Resets to resetValue |
| Double-click the value or label, Enter on the dial | Type a value; Enter applies it, Escape cancels |
The value keeps one width across the whole range, so the layout never moves while you turn it.
Anatomy
<Knob>
<KnobDial>
<KnobTrack />
<KnobRange />
<KnobPointer />
</KnobDial>
<KnobValue />
<KnobLabel />
</Knob>KnobTrack, KnobRange and KnobPointer are SVG elements inside a 100 × 100 view box, so you can add your own shapes next to them. KnobScale and KnobCap are another set of parts for the same dial, shown in the volume dial.
Examples
Sizes and disabled
Volume dial
A hi-fi volume dial: KnobScale draws numbered ticks around the dial and KnobCap a brushed aluminium cap with an indicator dot. Give it room for the numbers with a larger --knob-size.
Ticks between origin and the value light up, so a bipolar knob lights from its centre. The ticks are spread evenly along the arc, so they follow scale="log" too.
Theming
| Variable or attribute | Meaning |
|---|---|
--knob-size | Set by size |
--knob-angle | The pointer angle, live, for custom skins |
data-dragging | On the dial while dragging |
data-at-origin | The value sits at origin |
--knob-cap-metal | KnobCap's metal, white by default |
--knob-cap-shade | KnobCap's shading, black by default |
data-active | On KnobScale ticks inside the lit range |
data-major | On KnobScale's long ticks |
Style the SVG parts with stroke-* and fill-* classes. Restyle the lit ticks from the scale, for example <KnobScale className="**:data-active:stroke-primary" />.
Accessibility
The dial is a focusable slider with aria-valuetext from format, named by KnobLabel. It supports the same keys as the fader, and Enter opens the value editor.
API reference
Prop
Type
KnobValue
Prop
Type
KnobScale
Prop
Type