audio/ui

Overview

audio/ui is an MIT-licensed set of accessible, composable audio interface components for React, built by Ouest Labs. It comes in two layers: headless primitives on npm (@audio-ui/react, built on the framework-agnostic @audio-ui/core) that handle behavior and leave styling to the project, and a shadcn registry of styled components, blocks and hooks built on those primitives.

The library is Web Audio API first. Meters, spectrum analyzers and tuners read real signals from AnalyserNodes, and live values update without re-rendering React. Beyond single controls, the registry covers full workstation pieces such as an arrangement editor, piano roll, sequencer, mixer and a range of effect device panels, with 235 registry items in total.

Features

• Controls: Knob, fader, XY pad, envelope and automation envelope.
• Keyboards and pads: Piano, pad and a pocket synth instrument.
• Displays: Meter, needle meter, waveform, plot, spectrum analyzer and tuner.
• Workstation: Arrangement timeline, piano roll with scale menu and note tools, sequencer, transport, scrubber and BPM control.
• Effect devices: Compressor, multiband, limiter, gate, de-esser, equalizer, filter, saturator, delay, reverb, chorus, phaser and more.
• Audio engine hooks: 25 hooks for Web Audio, transport clocks, MIDI input and playback, microphone, pitch, spectrum and undo history.
• Agent support: An agent skill, MCP server, llms.txt and a Claude Code plugin with four skills.

Tech stack

• React
• @audio-ui/react, @audio-ui/core
• Web Audio API, Web MIDI
• Base UI, Zod

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @audio-ui/component-name