Introduction

Accessible audio controls for React, as headless primitives on npm and as styled components you copy into your shadcn/ui project. Built to be used by people and by AI agents.

audio/ui is a set of accessible, composable audio controls for React: knobs, faders, XY pads, envelopes, meters, waveforms, timelines, sequencers, drum pads, piano keyboards and piano rolls.

Audio controls have many details: a knob has to drag, respond to the wheel and the keyboard, reset on double click, and be announced correctly by a screen reader. audio/ui implements them once.

Two layers

Use the layer that fits your project. They share the same behavior.

@audio-ui/react are headless primitives from npm: behavior and accessibility, no styles. Pick them when you have your own design system.

pnpm add @audio-ui/react

The @audio-ui registry holds styled components and ready blocks that you copy into your code and own. Pick it when you use shadcn/ui and Tailwind CSS v4.

pnpm dlx shadcn@latest add @audio-ui/knob

Both are open source. With the registry you receive the actual code, so you can read it, change it and learn from it.

Top components

Each links to its docs, with a live preview, the API and the source. Install any of them with npx shadcn@latest add @audio-ui/<name>.

Top components · 11

Knob
Rotary parameter with drag, wheel, keyboard and reset. Docs.
Fader
Linear gain or parameter slider. Docs.
XY Pad
Two parameters on one surface. Docs.
Envelope
Breakpoint editor for ADSR and other ramps. Docs.
Meter
Stereo and multi-channel level with peak hold. Docs.
Waveform
Seekable, live or bar-style waveform with regions. Docs.
Plot
Draggable curves for EQs, filters and compressors. Docs.
Timeline
Zoomable arrangement view with a smooth playhead. Docs.
Sequencer
Step grid to draw a pattern. Docs.
Pad
Drum pads with velocity and choke groups. Docs.
Piano Roll
DAW-style note editor with a velocity lane. Docs.

Looking for a whole screen? The component catalog has composed blocks (a pocket synth, a wave shaper, a waveform player) you can install the same way.

Built for agents

audio/ui is made to be used by AI coding agents as much as by people. Open code, one consistent API and plain markdown docs mean an agent can find the right component, read how it works and wire it up without guessing.

  • Agent skill: teaches your agent which layer to pick, how to install and the mistakes to avoid.
  • MCP server: https://www.audio-ui.dev/mcp lets your agent list components, read their docs and search the catalog.
  • llms.txt: a structured map of every docs page, each also served as markdown.

Principles

  • Accessible by default: native inputs where it matters, labelled controls, full keyboard support.
  • Composable: small parts that fit together, so you pick the level of abstraction for each screen.
  • Open code: read it, change it, own it.
  • No lag: values that change every frame, like playheads and meters, move without re-rendering your page.

Next steps

Head over to Get started to add audio/ui to your project, or open Knob to install your first component.

Installation
Built by Ouest Labs, the source code is available on GitHub.
RSS