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.
When to use the Knob component
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 https://reactframe.com/r/knob.jsonOr 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
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.
