# audio/ui > Audio controls for React: knobs, faders, meters, waveforms, timelines, sequencers and piano rolls, as headless primitives on npm or shadcn/ui components. audio/ui has two layers. `@audio-ui/react` (npm) holds headless, accessible primitives. The `@audio-ui` shadcn registry holds styled components and ready blocks that you copy into your project and own. Requires React 19; the registry also needs Tailwind CSS v4. - Install a component: `npx shadcn@latest add @audio-ui/knob` - Install the primitives: `npm install @audio-ui/react` - Every docs page is also served as markdown: replace `/docs` with `/llm` in its URL. - Created by [Cécé Lucien Loua](https://loua.tech). Source: https://github.com/ouestlabs/audio-ui ## Guides - [Agent Skill](https://www.audio-ui.dev/llm/agents): Give your coding agent the audio/ui skill so it picks the right component, wires it to Web Audio without clicks, keeps live data out of React and styles the primitives. - [Installation](https://www.audio-ui.dev/llm/get-started): A quick guide to adding audio/ui components to your application. - [Headless styling](https://www.audio-ui.dev/llm/headless-styling): How to style the primitives of @audio-ui/react with nothing but CSS: each part exposes its state as data attributes and its live values as CSS variables, and the reference below lists them for every primitive. - [Introduction](https://www.audio-ui.dev/llm): 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. - [MCP](https://www.audio-ui.dev/llm/mcp): Connect your AI agent to audio/ui with the MCP server, to list components, read their docs and search the catalog. - [Primitives](https://www.audio-ui.dev/llm/primitives): How the headless primitives of @audio-ui/react are put together, styled, controlled and read, the same way for every one of them. - [Registry](https://www.audio-ui.dev/llm/registry): Learn how to use the audio/ui Registry with shadcn/ui. - [Roadmap](https://www.audio-ui.dev/llm/roadmap): What audio/ui ships today, and what comes next. - [Styling](https://www.audio-ui.dev/llm/styling): A guide for extended styling options with our color system. ## Elements - [Knob](https://www.audio-ui.dev/llm/components/base/knob): A rotary control for continuous parameters, with pointer, wheel and keyboard input. - [Fader](https://www.audio-ui.dev/llm/components/base/fader): A linear slider for gain and other continuous parameters. - [XY Pad](https://www.audio-ui.dev/llm/components/base/xypad): A two-dimensional control for two parameters at once, with pointer, wheel and keyboard input. - [Envelope](https://www.audio-ui.dev/llm/components/base/envelope): An editor for a breakpoint ramp, such as an ADSR shape or an automation curve. - [Piano](https://www.audio-ui.dev/llm/components/base/piano): A piano keyboard for a MIDI pitch range, played with the pointer, touch or the keyboard. - [Pad](https://www.audio-ui.dev/llm/components/base/pad): A grid of drum pads struck by pointer, touch or keyboard, with velocity and choke groups. - [Meter](https://www.audio-ui.dev/llm/components/base/meter): A level meter in decibels for one or more channels, with peak hold. - [Waveform](https://www.audio-ui.dev/llm/components/base/waveform): Draws audio: a seekable waveform with regions and markers, a live waveform that scrolls with the signal, and a bar visualizer. - [Plot](https://www.audio-ui.dev/llm/components/base/plot): Curves and draggable points, for equalizers, filters and compressors. - [Spectrum Analyzer](https://www.audio-ui.dev/llm/components/base/spectrum-analyzer): The level of a sound across frequencies, live, on a log axis in hertz, with held peaks. - [Tuner](https://www.audio-ui.dev/llm/components/base/tuner): The note and the pitch of a sound, live from the microphone, with a needle on a scale of cents. ## Workstation - [Timeline](https://www.audio-ui.dev/llm/components/base/timeline): A zoomable timeline for arrangement views and editors, with a ruler that seeks, lanes and a playhead. - [Arrangement editor](https://www.audio-ui.dev/llm/components/base/arrangement-editor): The parts of a DAW's arrangement, each installed on its own: its state, its clips, track reordering, locators and time signatures, automation and MIDI playback, over a Timeline. - [Piano roll](https://www.audio-ui.dev/llm/components/base/piano-roll): A note editor on a grid: draw, move, resize and select notes, with a playable keyboard and a velocity lane. - [Scale menu](https://www.audio-ui.dev/llm/components/base/scale-menu): A menu that picks a root and a scale and turns the scale on or off, in parts you place beside items of your own. - [Note find](https://www.audio-ui.dev/llm/components/base/note-find): Finds notes by what they are: a pitch, ranges of velocity, length and chance, in or out of the scale, active or not, every few, or the rest. - [Note edit menu](https://www.audio-ui.dev/llm/components/base/note-edit-menu): A menu of commands over a piano roll's notes, with their keys: split, join, quantize, legato, time commands, fit to scale, chance and velocity. - [Sequencer](https://www.audio-ui.dev/llm/components/base/sequencer): A step grid: press a step, or drag across several, to draw a pattern. - [Transport](https://www.audio-ui.dev/llm/components/base/transport): DAW transport controls: play, pause and stop, the position in bars, beats and sixteenths, loop and metronome toggles, tempo and time signature. - [Scrubber](https://www.audio-ui.dev/llm/components/base/scrubber): A compact player: play and pause, the position, a seek bar and the length. - [Mixer](https://www.audio-ui.dev/llm/components/base/mixer): A mixing console: tracks with pan, fader, meter, mute and solo into a master with a stereo meter, every meter reading the real signal of its channel. ## Devices - [Devices](https://www.audio-ui.dev/llm/devices): What a device is, the four pieces it comes in, and what every device shares: the sidechain, the tempo, the latency and the tools an agent drives it with. The catalog is grouped as in a mixer: dynamics, EQ and filters, distortion, delay and reverb, modulation, utility and instruments. - [Compressor](https://www.audio-ui.dev/llm/components/base/compressor): A compressor device: threshold, ratio, attack, release, knee, make-up and mix, a panel that draws its transfer curve, a Web Audio engine with a sidechain, and tools for agents. - [Multiband compressor](https://www.audio-ui.dev/llm/components/base/multiband): A multiband compressor device: two splits into three bands, a threshold and a ratio for each, a shared attack and release, a panel that draws the bands, a Web Audio engine and tools for agents. - [Limiter](https://www.audio-ui.dev/llm/components/base/limiter): A limiter device: input gain, ceiling and release, a panel that draws its transfer curve with a handle on the ceiling, a Web Audio engine and tools for agents. - [Gate](https://www.audio-ui.dev/llm/components/base/gate): A gate device: threshold, floor, attack, hold, release and look-ahead, a panel that draws its transfer curve, a Web Audio engine with a sidechain, and tools for agents. - [De-esser](https://www.audio-ui.dev/llm/components/base/deesser): A de-esser device: frequency, threshold, ratio, range and listen, a panel that draws what it does at each frequency, a Web Audio engine and tools for agents. - [Transient shaper](https://www.audio-ui.dev/llm/components/base/transient): A transient shaper device: attack and sustain, each up or down by 12 dB, a panel with one handle for both, a Web Audio engine and tools for agents. - [Equalizer](https://www.audio-ui.dev/llm/components/base/equalizer): An equalizer device: four bands with a type, a frequency, a gain and a width, a panel with a handle on each band, a Web Audio engine and tools for agents. - [Channel EQ](https://www.audio-ui.dev/llm/components/base/channel-eq): A channel EQ device: a low shelf, a sweepable mid bell, a high shelf, a high-pass switch and an output level, a panel with a handle on the mid band, a Web Audio engine and tools for agents. - [Filter](https://www.audio-ui.dev/llm/components/base/filter): A filter device: a type, a cutoff and a resonance, a panel with a handle on the curve and a live spectrum, a Web Audio engine and tools for agents. - [Overdrive](https://www.audio-ui.dev/llm/components/base/overdrive): An overdrive device: a band-pass before a soft clip, a drive, a tone and a mix, a panel that draws the band that reaches the clip, a Web Audio engine and tools for agents. - [Saturator](https://www.audio-ui.dev/llm/components/base/saturator): A saturator device: four curves, a drive, a mix and an output, a panel that draws the transfer curve, a Web Audio engine and tools for agents. - [Distortion](https://www.audio-ui.dev/llm/components/base/distortion): A distortion device: a drive, a tone, a mix and an output, a panel that draws the transfer curve, a Web Audio engine and tools for agents. - [Redux](https://www.audio-ui.dev/llm/components/base/redux): A redux device: a number of bits, a downsample factor and a mix, a panel that draws the stairs the bits make, a Web Audio engine and tools for agents. - [Delay](https://www.audio-ui.dev/llm/components/base/delay): A delay device: a time or a note value, a feedback, a tone and a mix, a panel that draws the echoes with a handle, a Web Audio engine and tools for agents. - [Reverb](https://www.audio-ui.dev/llm/components/base/reverb): A reverb device: a decay, a pre-delay, a damping and a mix, a panel that draws the tail with a handle, a Web Audio engine and tools for agents. - [Chorus](https://www.audio-ui.dev/llm/components/base/chorus): A chorus device: a rate or a note value, a depth, a delay and a mix, a panel that draws the sweep of the delay, a Web Audio engine and tools for agents. - [Phaser](https://www.audio-ui.dev/llm/components/base/phaser): A phaser device: a phaser or flanger mode, a rate or a note value, a depth, a centre frequency, a delay, a feedback and a mix, a panel that draws the sweep, a Web Audio engine and tools for agents. - [Auto pan](https://www.audio-ui.dev/llm/components/base/auto-pan): An auto pan device: a pan or tremolo mode, a wave shape, a rate or a note value and a depth, a panel that draws the movement, a Web Audio engine and tools for agents. - [Utility](https://www.audio-ui.dev/llm/components/base/utility): A utility device: a gain, a pan, a width, a mono switch and a phase invert, a panel without a display, a Web Audio engine and tools for agents. - [Mid/side](https://www.audio-ui.dev/llm/components/base/mid-side): A mid/side device: a level for the centre, a level for the sides and a bass mono frequency, a panel with one handle for the two levels, a Web Audio engine and tools for agents. - [Pocket synth](https://www.audio-ui.dev/llm/components/base/pocket-synth): A synth device: a waveform, a filter and a volume, a panel with a pad that plays it, a Web Audio engine with noteOn and noteOff, and tools for agents. - [Wave shaper](https://www.audio-ui.dev/llm/components/base/wave-shaper): A wave shaper synth device: a waveform, a drive, a tone, a detune, a mix and a volume, a panel with a pad that plays it, a Web Audio engine with noteOn and noteOff, and tools for agents. ## Audio engine - [Overview](https://www.audio-ui.dev/llm/engine): What makes the sound behind the components: the hooks and libraries audio/ui ships on the Web Audio API, and how an engine of your own drives the same components. - [Output](https://www.audio-ui.dev/llm/engine/output): The page's one audio context, and a master bus with a safety limiter that every sound of a screen goes through. - [Clock and time](https://www.audio-ui.dev/llm/engine/clock-and-time): A transport clock that schedules notes ahead on the audio clock, with a loop, seeking and tempo changes, and the musical time it counts in. - [Synthesis](https://www.audio-ui.dev/llm/engine/synthesis): Synth voices shaped by an envelope, the ramps that shape them, and drum hits made from oscillators and noise. - [Input](https://www.audio-ui.dev/llm/engine/input): A MIDI keyboard and the microphone: the notes of the page's MIDI input, and the microphone as an analyser. - [Analysis](https://www.audio-ui.dev/llm/engine/analysis): Live levels and spectra from an analyser, in the shape a meter or a plot reads, and the analysis functions behind them. - [Controllers](https://www.audio-ui.dev/llm/engine/controllers): The logic under each primitive, from @audio-ui/core: one controller per control, with the same contract whatever draws it. A React part is one adapter of it; a plain DOM page, Vue or Svelte can be another. ## For agents - [MCP server](https://www.audio-ui.dev/mcp): remote Streamable HTTP server with the tools list_components, get_component_docs and search_catalog. - [Agent skill](https://github.com/ouestlabs/audio-ui/tree/main/skills/audio-ui): install with `npx skills add ouestlabs/audio-ui`. - [Full docs in one file](https://www.audio-ui.dev/llms-full.txt) ## Optional - [Component catalog](https://www.audio-ui.dev/components): 58 ready blocks and demos. - [Changelog feed](https://www.audio-ui.dev/rss.xml)