Knob React component
A rotary dial for picking a value in a range, like a mixer control: drag up or down, scroll or use the keyboard, with a 270° progress ring and a sliding thumb, or a physical-looking knob with an indicator and ticks that light up as it turns.
About the Knob component
Knob is a circular control for picking a value, like the volume or gain knobs on audio gear. It turns through 270 degrees, from the lower left round to the lower right, and the value springs smoothly to each new position. It comes in two looks: ring, a progress arc with a dot on the end and the value in the middle, and dial, a physical-looking knob with an indicator line, 21 tick marks that light up as it turns and the value underneath.
min, max and step set the range (0 to 100 by default), and value or defaultValue with onValueChange set and report it. unit adds a suffix such as % or dB, and format replaces the readout with your own text. size sets the diameter (128px by default), color the arc and indicator color, and label the caption under it. Dragging up turns it up, and 200px of travel covers the whole range.
When to use it
Use Knob in audio, video and creative tools, dashboards with dials, and settings panels where a compact circular control fits better than a long slider.
For precise numbers people will type, pair it with a number input or use a Slider instead.
Installation
Add the Knob component to your project with the shadcn CLI. It lands in components/knob.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/knobOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<Knob /> accepts 15 props, all optional.
| Prop | Type | Default |
|---|---|---|
| value | number | — |
| defaultValue | number | 50 |
| onValueChange | (value: number) => void | — |
| min | number | 0 |
| max | number | 100 |
| step | number | 1 |
| label | string | "Volume" |
| unit Text after the number, e.g. "%" or " dB". | string | "%" |
| format Format the centre readout yourself. | (value: number) => string | — |
| variant ring: a progress arc. dial: a physical-looking knob with an indicator and ticks. | "ring" | "dial" | "ring" |
| size | number | 128 |
| color Arc colour. | string | — |
- valuenumber
- defaultValuenumberDefault: 50
- onValueChange(value: number) => void
- minnumberDefault: 0
- maxnumberDefault: 100
- stepnumberDefault: 1
- labelstringDefault: "Volume"
- unit
Text after the number, e.g. "%" or " dB".
stringDefault: "%" - format
Format the centre readout yourself.
(value: number) => string - variant
ring: a progress arc. dial: a physical-looking knob with an indicator and ticks.
"ring" | "dial"Default: "ring" - sizenumberDefault: 128
- color
Arc colour.
string
Show all 15 propsShow fewer
| disabled | boolean | false |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- disabledbooleanDefault: false
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Knob FAQ
- How do I turn it?
- Drag up or down (hold Shift for fine control), scroll the wheel over it, or focus it and use the arrow keys, Page Up / Down, Home and End.
- Can I show my own units?
- Use unit for a simple suffix or format to build the readout yourself, like +6 dB or 124 bpm.
- Is it accessible?
- It's a slider with its label, range, current value and readable value text, so screen readers announce changes.
- Does it work on touch screens?
- Yes. Dragging uses pointer events and the knob sets touch-action: none, so dragging a finger up or down turns it instead of scrolling the page.
