audiocnKnob
A rotary control for dense layouts, drawn in SVG.
0 dBGain
CPan
120Low cut
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.
Examples
Sizes and disabled
sm
default
lg
disabled
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 |
Style the SVG parts with stroke-* and fill-* classes.
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