Knob

A circular knob control for adjusting values. Built on audio-ui primitives.

A knob component for adjusting values with a circular, rotary control. Perfect for audio parameter controls, filters, and effects.

Installation


pnpm dlx shadcn@latest add @audio/knob

import { Knob } from "@/components/audio/knob";

<Knob
  defaultValue={50}
  max={100}
  min={0}
  step={1}
/>

Prop	Type	Default	Description
`size`	`"sm" \| "default" \| "lg" \| "xl"`	`"default"`	Size variant.
`className`	`string`	-	Additional CSS classes.
`value`	`number`	-	Controlled value.
`defaultValue`	`number`	-	Uncontrolled default value.
`min`	`number`	`0`	Minimum value.
`max`	`number`	`100`	Maximum value.
`step`	`number`	`1`	Step increment.
`disabled`	`boolean`	`false`	Whether the knob is disabled.
`onValueChange`	`(value: number) => void`	-	Callback when value changes during interaction.
`onValueCommit`	`(value: number) => void`	-	Callback when value is committed (on release).

All other props are inherited from the KnobPrimitive.RootProps from audio-ui.

1000 Hz

Gain

Reverb

Delay

Important Information:

Built on audio-ui: This component is built on top of the audio-ui package primitives, providing a high-quality, accessible knob control.
Visual Feedback: The knob displays an arc indicator showing the current value range and a pointer indicating the exact value.
Size Variants: Four size variants are available: sm, default, lg, and xl. These affect the overall knob diameter.
Interaction: The knob supports mouse drag, touch, and keyboard navigation for adjusting values.

Last updated 12/24/2025

On This Page