KnobPro
A rotary dial like on audio gear: drag, scroll or use the arrow keys.
62%
Gain
2.4k Hz
Frequency
C
Pan
When to use
- Audio, video and creative tools; compact controls for ranges.
When not to use
- Precise values in forms: use a number field or slider.
Installation
Usage
Import it from @/components/ui/knob after installing.
example.tsx
import { Knob } from "@/components/ui/knob";
<Knob label="Gain" defaultValue={60} format={(n) => `${Math.round(n)}%`} />API reference
Knob
A dial with a value arc. Drag up or right to increase.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue / onValueChange | number | 50 | Controlled or uncontrolled. |
| min / max / step | number | 0 / 100 / 1 | Range and snapping. |
| size | number | 96 | Diameter in px. |
| label / format | string / (n) => string | – | Name and value text. |
Keyboard interactions
| Keys | Action |
|---|---|
| ↑or→ | Increase by step |
| ↓or← | Decrease by step |
| Page UporPage Down | 10% steps |
| HomeorEnd | Min or max |
Accessibility
- A labelled slider with min, max, now and formatted valuetext.
Motion
- The dial and arc follow a spring; the knob presses in while dragged.
Responsive behavior
- Fixed size; scroll-wheel works where available.
Performance
- One spring drives rotation and arc.
Notes for AI
- Use format for units so screen readers hear them.
This page as Markdown, for assistants and coding agents:
/components/knob/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt