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, 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.
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.
The @audio 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.
Both are open source. With the registry you receive the actual code, so you can read it, change it and learn from it.
Each links to its docs, with a live preview, the API and the source. Install any of them with npx shadcn@latest add @audio/<name>.
Top components · 10
KnobFaderXY PadEnvelopeMeterWaveformPlotTimelineSequencerPiano RollLooking 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.
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.
https://audio-ui.dev/mcp lets your agent list components, read their docs and search the catalog.Head over to Get started to add audio/ui to your project, or open Knob to install your first component.