# audio/ui

> Accessible, composable audio controls for React: headless primitives on npm and styled components for shadcn/ui. Knobs, faders, XY pads, meters, waveforms, timelines, sequencers and piano rolls, ready for AI agents through an MCP server and an agent skill.

audio/ui has two layers. `@audio-ui/react` (npm) holds headless, accessible primitives. The `@audio` 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/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://audio-ui.xyz/llm/agents): Give your coding agent the audio/ui skill so it picks the right layer, installs the right component and avoids common mistakes.
- [Get Started](https://audio-ui.xyz/llm/get-started): A quick guide to adding audio/ui components to your application.
- [Introduction](https://audio-ui.xyz/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://audio-ui.xyz/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://audio-ui.xyz/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://audio-ui.xyz/llm/registry): Learn how to use the audio/ui Registry with shadcn/ui.
- [Roadmap](https://audio-ui.xyz/llm/roadmap): What audio/ui ships today, and what comes next.
- [Styling](https://audio-ui.xyz/llm/styling): A guide for extended styling options with our color system.

## Components
- [Envelope](https://audio-ui.xyz/llm/components/base/envelope): An editor for a breakpoint ramp, such as an ADSR shape or an automation curve.
- [Fader](https://audio-ui.xyz/llm/components/base/fader): A linear slider for gain and other continuous parameters.
- [Knob](https://audio-ui.xyz/llm/components/base/knob): A rotary control for continuous parameters, with pointer, wheel and keyboard input.
- [Meter](https://audio-ui.xyz/llm/components/base/meter): A level meter in decibels for one or more channels, with peak hold.
- [Piano roll](https://audio-ui.xyz/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.
- [Piano](https://audio-ui.xyz/llm/components/base/piano): A piano keyboard for a MIDI pitch range, played with the pointer, touch or the keyboard.
- [Plot](https://audio-ui.xyz/llm/components/base/plot): Curves and draggable points, for equalizers, filters and compressors.
- [Scrubber](https://audio-ui.xyz/llm/components/base/scrubber): A compact player: play and pause, the position, a seek bar and the length.
- [Sequencer](https://audio-ui.xyz/llm/components/base/sequencer): A step grid: press a step, or drag across several, to draw a pattern.
- [Timeline](https://audio-ui.xyz/llm/components/base/timeline): A zoomable timeline for arrangement views and editors, with a ruler that seeks, lanes and a playhead.
- [Transport](https://audio-ui.xyz/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.
- [Waveform](https://audio-ui.xyz/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.
- [XY Pad](https://audio-ui.xyz/llm/components/base/xypad): A two-dimensional control for two parameters at once, with pointer, wheel and keyboard input.

## For agents
- [MCP server](https://audio-ui.xyz/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://audio-ui.xyz/llms-full.txt)

## Optional
- [Component catalog](https://audio-ui.xyz/components): 28 ready blocks and demos.
- [Changelog feed](https://audio-ui.xyz/rss.xml)