# Synth Knob

> A rotary knob from a synth, with detents.

Drag, scroll or use the keys; it clicks from step to step with a small kick, and an arc shows how far it is turned. For audio tools, creative apps, settings with feel and game menus.

- Family: Originals
- Plan: Creative. Included with Creative.
- Requires: React, Tailwind CSS v4 and the motion package
- Page with a live preview: https://galactrex.com/ui/synth-knob/
- Licence: https://galactrex.com/ui/license/

## Install

```sh
npx @galactrex/ui login   # once, with an API key from https://galactrex.com/account/
npx @galactrex/ui add synth-knob
```

It installs to `components/galactrex/synth-knob.tsx`, with the shared motion helpers beside it. First time in a project: `npx @galactrex/ui init` (setup guide: https://galactrex.com/docs/ui-components-setup/).

## Usage

```tsx
import { SynthKnob } from "@/components/galactrex/synth-knob";

<SynthKnob label="Cutoff" min={20} max={20000} step={10} format={(v) => `${v} Hz`} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | — | What it controls. |
| `value / defaultValue` | `number` | — | Controlled or initial value. |
| `onChange` | `(value: number) => void` | — | Called on every step. |
| `min, max, step` | `number` | `0, 100, 1` | Range and detent size. |
| `format` | `(value: number) => string` | — | How the value is written. |
| `size` | `number` | `72` | Diameter in px. |
| `className` | `string` | — | Extra classes for the outer element. |

## Variants

- **Bank.** A row of knobs for a mixer or an effect.
- **Stepped.** A big `step` for a few chunky positions.

## Accessibility

- role=slider with value, range and text; arrows, Page Up/Down, Home and End.
- Shift while dragging or scrolling for fine control.

## Motion

- The pointer rotates on a stiff spring so each detent kicks slightly.
- Reduced motion: no kick.