Knob Pro

A knob that clicks from detent to detent. As you drag, it leans toward the next detent, then clicks over on a spring. The knurled grip turns while the light on the brushed cap stays put, the way it would under a lamp. A ring of LEDs lights up to the value, one after another.

Pro previewPro previewPro preview

Installation

Terminalbash

npx @neelshha/ui@latest login
npx @neelshha/ui@latest add knob

Usage

page.tsxtsx

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

<Knob
  label="Drive"
  max={12}
  value={drive}
  onValueChange={setDrive}
  format={(value) => `${value} dB`}
/>

Drag up or right to turn it up, the way audio software does, and hold Shift to turn it finely. With focus, the scroll wheel turns it one detent per notch. Scrolling past a knob without focus still scrolls the page. Double-click to reset it.

From the middle

origin lights the arc from the centre out, for pan and balance. A double-click puts it back in the middle.

Pro preview

page.tsxtsx

<Knob
  label="Pan"
  min={-50}
  max={50}
  step={5}
  origin={0}
  format={(v) => (v === 0 ? "C" : v < 0 ? `L ${-v}` : `R ${v}`)}
/>

Big detents

Five positions, so each turn is a big click. The ink finish reads well on a light panel.

Pro preview

page.tsxtsx

const modes = ["Off", "Eco", "Normal", "Sport", "Track"];

<Knob
  label="Mode"
  tone="ink"
  max={modes.length - 1}
  defaultValue={2}
  format={(v) => modes[v]}
/>

Keyboard

It's a slider. The arrow keys move one detent, Page Up and Page Down a tenth of the range, and Home and End go to the ends. Screen readers hear the formatted value, like "Pan, L 20".

Source

API

Other props go to the outer div. Its size comes from --ns-knob-size. With reduced motion it turns and lights at once, without the spring.

Prop	Type	Default	Description
`label`	`string`		Printed under the knob, and its name for screen readers.
`value / defaultValue`	`number`		Controlled or uncontrolled. onValueChange fires with each detent the knob lands on.
`min / max`	`number`	`0 / 100`	The ends of the sweep, from seven o'clock round to five.
`step`	`number`	`1`	The distance between detents. Up to 25 detents get an LED each. More than that share 25.
`origin`	`number`	`min`	Where the lit arc starts. The middle of the range makes a pan or balance knob.
`format`	`(value: number) => string`	`String`	The readout, and what screen readers hear.
`disabled`	`boolean`	`false`	Dims it and stops it turning.
`tone`	`"chrome" \| "ink"`	`"chrome"`	The finish: brushed aluminium or black.