---
name: "@audio-ui"
slug: "audio-ui"
description: "Accessible audio controls for React: knobs, faders, XY pads, meters, waveforms, timelines, sequencers and piano rolls, on headless primitives from @audio-ui/react."
category: "Animated components"
tags: ["accessibility", "animation", "audio", "backgrounds", "blocks", "buttons", "cards", "charts", "design-system", "forms", "hooks"]
framework: "react"
license: "MIT"
author: "ouestlabs"
website: "https://www.audio-ui.dev"
github: "https://github.com/ouestlabs/audio-ui"
registry: "https://www.audio-ui.dev/r/registry/registry.json"
pro: false
pro_url: null
github_stars: 194
component_count: 184
generated_at: "2026-10-17T06:30:14.294Z"
---

# @audio-ui

Accessible audio controls for React: knobs, faders, XY pads, meters, waveforms, timelines, sequencers and piano rolls, on headless primitives from @audio-ui/react.

## Links

- Website: https://www.audio-ui.dev
- GitHub: https://github.com/ouestlabs/audio-ui
- Registry JSON: https://www.audio-ui.dev/r/registry/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/audio-ui
- This file: https://sh4dcn.vercel.app/md/audio-ui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://www.audio-ui.dev/r/registry/registry.json
pnpm dlx shadcn@latest add https://www.audio-ui.dev/r/registry/registry.json
bunx shadcn@latest add https://www.audio-ui.dev/r/registry/registry.json
# clone the source repo
git clone https://github.com/ouestlabs/audio-ui.git
# fetch the raw registry index
curl -s https://www.audio-ui.dev/r/registry/registry.json
```

## Components (184)

| name | type | description | install |
| --- | --- | --- | --- |
| envelope | registry:ui | An editor for a breakpoint ramp, such as an ADSR shape or an automation curve. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/envelope.json` |
| knob | registry:ui | A rotary control for continuous parameters, with pointer, wheel and keyboard input. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/knob.json` |
| fader | registry:ui | A linear slider for gain and other continuous parameters. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/fader.json` |
| xypad | registry:ui | A two-dimensional control for two parameters at once, with pointer, wheel and keyboard input. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/xypad.json` |
| pad | registry:ui | A grid of drum pads struck by pointer, touch or keyboard, with velocity and choke groups. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/pad.json` |
| piano | registry:ui | A piano keyboard for a MIDI pitch range, played with the pointer, touch or the keyboard. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/piano.json` |
| piano-roll | registry:ui | A note editor on a grid: draw, move, resize and select notes, with a playable keyboard and a velocity lane. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/piano-roll.json` |
| tuner | registry:ui | The note and the pitch of a sound, live from the microphone, with a needle on a scale of cents. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/tuner.json` |
| device-panel | registry:ui | A panel for any device: a knob per number and a toggle per switch, from its descriptors, controlled by a state a host owns. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/device-panel.json` |
| compressor-panel | registry:ui | The face of the compressor device: the transfer curve it plays, with the threshold and the level going in on it, over the device's knobs. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/compressor-panel.json` |
| pocket-synth-panel | registry:ui | The face of the Pocket Synth device: a pad that plays it, its waveform and filter, and its volume. Controlled, with the notes leaving through onNoteOn and onNo… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/pocket-synth-panel.json` |
| waveform-select | registry:ui | A row of buttons, one per waveform, each drawn as its shape: pick one. Fed by the options of a device's choice parameter. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/waveform-select.json` |
| filter-type-select | registry:ui | A row of buttons, one per filter type, each drawn as the response it has: low-pass, high-pass, band-pass, notch, low and high cut, low and high shelf, bell. Fe… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/filter-type-select.json` |
| curve-select | registry:ui | A row of buttons, one per transfer curve, each drawn from the curve itself: you give it the function of each option, so the icon is what the device does and ne… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/curve-select.json` |
| play-toggle | registry:ui | A play and pause button for a demo signal: the icon follows the state, the name says what pressing it does. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/play-toggle.json` |
| wave-shaper-panel | registry:ui | The face of the Wave Shaper device: a pad that plays it, its waveform and its knobs. Controlled, with the notes leaving through onNoteOn and onNoteOff. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/wave-shaper-panel.json` |
| delay-panel | registry:ui | The face of the delay device: the echoes it makes, one line each and fainter as they fade, with a handle on the first to drag its time and feedback, over the d… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/delay-panel.json` |
| reverb-panel | registry:ui | The face of the reverb device: the tail it makes, its level falling to -60 dB, with a handle where it ends to drag the decay time, over the device knobs. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/reverb-panel.json` |
| filter-panel | registry:ui | The face of the filter device: the curve it plays with a handle on the cutoff to drag its frequency and resonance, an optional live spectrum behind it, over th… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/filter-panel.json` |
| distortion-panel | registry:ui | The face of the distortion device: its transfer curve against the straight line of a clean sound, over the device knobs. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/distortion-panel.json` |
| chorus-panel | registry:ui | The face of the chorus device: the delay time as the oscillator sweeps it over two seconds, over the device knobs. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/chorus-panel.json` |
| utility-panel | registry:ui | The face of the utility device: its gain, pan and width as knobs and its mono and invert switches. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/utility-panel.json` |
| limiter-panel | registry:ui | The face of the limiter device: its transfer curve against the straight line of a clean sound with a handle for the ceiling and the input gain, over the device… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/limiter-panel.json` |
| gate-panel | registry:ui | The face of the gate device: its transfer curve against the straight line of a clean sound with a handle on the threshold, over the device knobs. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/gate-panel.json` |
| saturator-panel | registry:ui | The face of the saturator device: its transfer curve against the straight line of a clean sound, over the device knobs and the choice of curve. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/saturator-panel.json` |
| phaser-panel | registry:ui | The face of the phaser-flanger device: the sweep of its oscillator over two seconds, over the device knobs, with the ones the mode does not use drawn off. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/phaser-panel.json` |
| auto-pan-panel | registry:ui | The face of the auto pan device: what the oscillator does to the pan or the level over two seconds, over the device knobs. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/auto-pan-panel.json` |
| channel-eq-panel | registry:ui | The face of the channel EQ device: the curve it plays with a handle on the mid band and an optional live spectrum, over the shelf knobs and the high-pass switc… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/channel-eq-panel.json` |
| overdrive-panel | registry:ui | The face of the overdrive device: the band that reaches the clip with a handle on its centre, over the device knobs. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/overdrive-panel.json` |
| deesser-panel | registry:ui | The face of the de-esser device: what it does at each frequency with a handle at the frequency to drag across and up or down for the range, over the device kno… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/deesser-panel.json` |
| multiband-panel | registry:ui | The face of the multiband compressor device: the three bands drawn against frequency with a handle on each split, over the knobs of each band. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/multiband-panel.json` |
| transient-panel | registry:ui | The face of the transient shaper device: a square with the sustain across and the attack up, and a handle to drag to both at once, over the output knob. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/transient-panel.json` |
| mid-side-panel | registry:ui | The face of the mid/side device: a square with the side level across and the mid level up, and a handle to drag to both at once, over the bass mono knob. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/mid-side-panel.json` |
| redux-panel | registry:ui | The face of the redux device: the stairs the bits make against the straight line of a clean sound, over the device knobs. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/redux-panel.json` |
| equalizer-panel | registry:ui | The face of the equalizer device: the curve it plays with a handle on each band to drag its frequency and gain, an optional live spectrum behind it, over the d… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/equalizer-panel.json` |
| spectrum-analyzer | registry:ui | The level of a sound across frequencies, live, on a log axis in hertz, with held peaks. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/spectrum-analyzer.json` |
| plot | registry:ui | Curves and draggable points, for equalizers, filters and compressors. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/plot.json` |
| meter | registry:ui | A level meter in decibels for one or more channels, with peak hold. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/meter.json` |
| waveform | registry:ui | Draws audio: a seekable waveform with regions and markers, a live waveform that scrolls with the signal, and a bar visualizer. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/waveform.json` |
| timeline | registry:ui | A zoomable timeline for arrangement views and editors, with a ruler that seeks, lanes and a playhead. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/timeline.json` |
| bpm-control | registry:ui | A tempo field on its own: type it, step it with the arrows, or drag its unit to scrub the value. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/bpm-control.json` |
| midi-connect-control | registry:ui | A button that connects the page's MIDI input, with the device's name beside it. Renders nothing when the browser has no Web MIDI. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/midi-connect-control.json` |
| sequencer | registry:ui | A step grid: press a step, or drag across several, to draw a pattern. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/sequencer.json` |
| scrubber | registry:ui | A compact player: play and pause, the position, a seek bar and the length. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/scrubber.json` |
| transport | registry:ui | DAW transport controls: play, pause and stop, the position in bars, beats and sixteenths, loop and metronome toggles, tempo and time signature. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/transport.json` |
| use-web-audio | registry:hook | Gone: the page's one AudioContext is the webAudio of the web-audio lib, imported where it is used. Installs that lib. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/use-web-audio.json` |
| use-playback-clock | registry:hook | Renamed to use-simulated-clock: installs it. It is a clock for a timeline that makes no sound, not one on the audio clock. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/use-playback-clock.json` |
| use-simulated-clock | registry:hook | A clock for a timeline that makes no sound: it runs while playing, loops between two points, and the playhead follows it without re-rendering React. Not on the… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/use-simulated-clock.json` |
| use-marquee-selection | registry:hook | A selection rectangle for the clips of a timeline: drag across bare lane (with Shift, or in a multi-select mode) and the clips it touches join the selection | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/use-marquee-selection.json` |
| use-arrangement | registry:hook | The state of an arrangement of clips on tracks, with its operations: selection, group moves and copies, split, duplicate, delete, adding and removing tracks, p… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/use-arrangement.json` |
| use-transport-clock | registry:hook | A look-ahead transport clock on the audio clock: it calls back with the audio time of each step so notes are scheduled sample-accurately, with a loop region, s… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/use-transport-clock.json` |
| use-master-bus | registry:hook | A master output bus with a safety limiter: every source connects into one gain node that a single fader governs. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/use-master-bus.json` |
| use-synth-voices | registry:hook | Polyphonic synth voices on the Web Audio API: start and release notes with an envelope, a velocity and a pitch bend. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/use-synth-voices.json` |
| use-midi-input | registry:hook | The notes of the page's MIDI input, with velocity and pitch bend: every component that calls it hears the same devices. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/use-midi-input.json` |
| use-microphone | registry:hook | The microphone as an AnalyserNode on the shared AudioContext: raw signal, never connected to the speakers, released on stop and on unmount | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/use-microphone.json` |
| use-pitch | registry:hook | The pitch of a signal as a live source: the note nearest the sound and its offset in cents, steadied by a median and held a moment after the sound stops, with … | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/use-pitch.json` |
| use-audio-levels | registry:hook | The live levels of a signal from its AnalyserNodes, in the shape a Meter paints from: RMS in dB per channel with a peak that holds and falls, refreshed every f… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/use-audio-levels.json` |
| use-simulated-levels | registry:hook | Levels that move on their own, with a peak that holds and falls, in the shape a Meter paints from: a demo meter that is never at rest | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/use-simulated-levels.json` |
| use-spectrum | registry:hook | The spectrum of an AnalyserNode as a live source for Plot.Trace: dB per point on a logarithmic frequency axis, refreshed every frame without re-rendering, and … | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/use-spectrum.json` |
| use-noise-through-eq | registry:hook | Pink noise played through an equalizer that follows your bands, with the analyser after it: what a plot draws is what is heard | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/use-noise-through-eq.json` |
| use-device-loop | registry:hook | A short loop of drums and plucked notes played through an effect's engine and out to a destination, for a block to show what a device does: the engine follows … | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/use-device-loop.json` |
| use-pulses-through-compressor | registry:hook | A looping pulse played through a compressor that follows your controls, with the level going in as a live source in dB: pair it with a transfer curve's Plot.Dot | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/use-pulses-through-compressor.json` |
| block-pocket-synth | registry:block | A synth you can plug in: its state, a panel that draws and plays it and a Web Audio engine that makes the sound, each its own file. Press the pad: pitch goes a… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/block-pocket-synth.json` |
| block-wave-shaper | registry:block | A wave shaper synth you can plug in: its state, a panel that draws and plays it and a Web Audio engine that makes the sound, each its own file. Press the pad: … | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/block-wave-shaper.json` |
| fader-vertical-demo | registry:example | Vertical fader | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/fader-vertical-demo.json` |
| fader-horizontal-demo | registry:example | Fader component example with horizontal orientation | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/fader-horizontal-demo.json` |
| fader-pan-demo | registry:example | Pan fader filling from the center: anchored at 0 on a -1…1 range | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/fader-pan-demo.json` |
| knob-demo | registry:example | Knob component example | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/knob-demo.json` |
| knob-filter-control-demo | registry:example | Filter cutoff knob on a logarithmic scale, 20 Hz to 20 kHz, every decade the same share of the dial | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/knob-filter-control-demo.json` |
| knob-arc-and-anchor-demo | registry:example | Knob value arc (rail + highlight) and optional anchor range | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/knob-arc-and-anchor-demo.json` |
| envelope-size-default-demo | registry:example | Envelope size default example | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/envelope-size-default-demo.json` |
| envelope-adsr-demo | registry:example | Controlled envelope with a live point count | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/envelope-adsr-demo.json` |
| piano-size-default-demo | registry:example | Piano size default example | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/piano-size-default-demo.json` |
| piano-active-notes-demo | registry:example | Piano lit from an external source via activeNotes | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/piano-active-notes-demo.json` |
| block-piano-roll | registry:block | A DAW-style piano roll, laid out like Sona's note editor, a scrolling roll with a playable keyboard stuck to its side, a loop brace and bar ruler stuck on top,… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/block-piano-roll.json` |
| meter-size-default-demo | registry:example | Meter size default example | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/meter-size-default-demo.json` |
| meter-horizontal-demo | registry:example | Horizontal meter example | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/meter-horizontal-demo.json` |
| xypad-live-value-demo | registry:example | XYPad with live x/y readout | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/xypad-live-value-demo.json` |
| xypad-bipolar-range-demo | registry:example | XYPad with bipolar pan/mix style ranges | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/xypad-bipolar-range-demo.json` |
| block-waveform-player | registry:block | A waveform player that shows what the waveform does: seek and hover, a loop region with handles, markers and zoom that follows the playhead. It starts on a syn… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/block-waveform-player.json` |
| block-timeline | registry:block | An arrangement timeline made for a whole screen: a bar ruler that seeks on the grid, a loop strip, a lane per track with clips to move between tracks, trim and… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/block-timeline.json` |
| waveform-demo | registry:example | Waveform default example | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/waveform-demo.json` |
| waveform-region-demo | registry:example | Waveform with a resizable loop region, markers and a hover time | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/waveform-region-demo.json` |
| waveform-live-demo | registry:example | Live waveform scrolling with the incoming signal | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/waveform-live-demo.json` |
| plot-demo | registry:example | An equalizer: drag each band to set its frequency and gain, and the curve is the response of all three | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/plot-demo.json` |
| plot-filter-demo | registry:example | A low-pass filter: one handle on the resonance peak sets the cutoff and how much it rings | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/plot-filter-demo.json` |
| plot-compressor-demo | registry:example | A compressor transfer curve: one handle sets the threshold, the other the ratio | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/plot-compressor-demo.json` |
| block-compressor | registry:block | A compressor you can plug in: its state, a panel that draws it and a Web Audio engine that plays it, side by side. Play a pulsing signal and turn the knobs | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/block-compressor.json` |
| block-equalizer | registry:block | An equalizer you can plug in: its state, a panel that draws it with a handle on each band and an engine that plays it, side by side. Play pink noise and the sp… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/block-equalizer.json` |
| block-delay | registry:block | A delay you can plug in: its state, a panel that draws the echoes it makes with a handle for the time and the feedback, and an engine that plays it. Play a loo… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/block-delay.json` |
| block-reverb | registry:block | A reverb you can plug in: its state, a panel that draws the tail it makes with a handle for the decay time, and an engine that plays it. Play a loop through it… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/block-reverb.json` |
| block-filter | registry:block | A filter you can plug in: its state, a panel that draws the curve it plays with a handle for the cutoff and the resonance, and an engine that plays it. Play a … | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/block-filter.json` |
| block-distortion | registry:block | A distortion you can plug in: its state, a panel that draws its transfer curve and an engine that plays it. Play a loop through it and turn the drive | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/block-distortion.json` |
| block-chorus | registry:block | A chorus you can plug in: its state, a panel that draws the sweep of its delay and an engine that plays it. Play a loop through it and turn the rate and the de… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/block-chorus.json` |
| block-utility | registry:block | A utility you can plug in: its state, a panel and an engine that plays it. Play a loop through it and move the pan and the width | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/block-utility.json` |
| block-limiter | registry:block | A limiter you can plug in: its state, a panel that draws its transfer curve with a handle on the ceiling and an engine that plays it. Play a loop through it, p… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/block-limiter.json` |
| block-gate | registry:block | A gate you can plug in: its state, a panel that draws its transfer curve with a handle on the threshold and an engine that plays it. Play a loop through it and… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/block-gate.json` |
| block-saturator | registry:block | A saturator you can plug in: its state, a panel that draws its transfer curve and an engine that plays it. Play a loop through it, pick a curve and turn the dr… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/block-saturator.json` |
| block-phaser | registry:block | A phaser and flanger you can plug in: its state, a panel that draws the sweep and an engine that plays it. Play a loop through it, switch the mode and turn the… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/block-phaser.json` |
| block-auto-pan | registry:block | An auto pan you can plug in: its state, a panel that draws the movement and an engine that plays it. Play a loop through it, pick a waveform and switch to trem… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/block-auto-pan.json` |
| block-channel-eq | registry:block | A channel EQ you can plug in: its state, a panel that draws the curve with a handle on the mid band and an engine that plays it. Play a loop through it and dra… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/block-channel-eq.json` |
| block-overdrive | registry:block | An overdrive you can plug in: its state, a panel that draws the band that reaches the clip and an engine that plays it. Play a loop through it, drag the handle… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/block-overdrive.json` |
| block-deesser | registry:block | A de-esser you can plug in: its state, a panel that draws what it does at each frequency and an engine that plays it. Play a voice through it, lower the thresh… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/block-deesser.json` |
| block-multiband | registry:block | A multiband compressor you can plug in: its state, a panel that draws the three bands and an engine that plays it. Play a loop through it and hold one band down | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/block-multiband.json` |
| block-transient | registry:block | A transient shaper you can plug in: its state, a panel with a handle for the attack and the sustain and an engine that plays it. Play a loop through it and dra… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/block-transient.json` |
| block-mid-side | registry:block | A mid/side device you can plug in: its state, a panel with a handle for the mid and the side and an engine that plays it. Play a wide loop through it and take … | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/block-mid-side.json` |
| block-redux | registry:block | A redux you can plug in: its state, a panel that draws the stairs the bits make and an engine that plays it. Play a loop through it and take the bits down | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/block-redux.json` |
| block-mixer | registry:block | Mixing console: four tracks of a loop with pan, fader, meter, mute and solo, into a master with a stereo meter, every meter reading its real signal | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/block-mixer.json` |
| block-drum-rack | registry:block | Drum rack: sixteen pads, each its own sound, shaped with tune, decay and level knobs | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/block-drum-rack.json` |
| pad-demo | registry:example | Four drum pads that play harder near the top; the closed hat cuts the open one short | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/pad-demo.json` |
| tuner-demo | registry:example | A chromatic tuner on the microphone: the nearest note, a needle on a scale of cents and the frequency, in the primary color when in tune | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/tuner-demo.json` |
| spectrum-analyzer-demo | registry:example | Play the keyboard and watch the spectrum: a sawtooth note lights its pitch and every harmonic above it, and the peaks hold a moment | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/spectrum-analyzer-demo.json` |
| sequencer-demo | registry:example | A drum machine: draw a pattern and hear it. Press a step or drag across several; the playing column lights up | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/sequencer-demo.json` |
| scrubber-demo | registry:example | A bar to seek on, with play or pause, the position and the length: a clock stands in for a player, and the bar and the time follow it | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/scrubber-demo.json` |
| transport-demo | registry:example | The transport of a DAW as joined clusters: play or pause, stop and the position in bars, beats and sixteenths; loop and metronome toggles; the tempo and the ti… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/transport-demo.json` |
| web-audio | registry:lib | Web Audio Lib | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/web-audio.json` |
| envelope-ramp | registry:lib | Envelope curves to gain automation: slicing an envelope at its sustain and scheduling its ramps on a GainNode's AudioParam, for synth voices | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/envelope-ramp.json` |
| audio-decode | registry:lib | Decoding an audio file into samples with the Web Audio API (decodeAudioData), the step before the waveform maths of @audio-ui/core/analysis | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/audio-decode.json` |
| compressor-device | registry:lib | The compressor as a device: its parameters and what they mean, the numbers that go on the nodes for a state, and the curve a state plays, with no panel and no … | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/compressor-device.json` |
| compressor-engine | registry:lib | A compressor on the Web Audio API for a compressor state: the node, its make-up taken back out or kept, a dry and compressed mix aligned to the node's lookahea… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/compressor-engine.json` |
| pocket-synth-device | registry:lib | The Pocket Synth as an instrument device: its waveform, filter and volume, and the pitch and filter cutoff a position on a pad plays, with no panel and no audi… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/pocket-synth-device.json` |
| pocket-synth-engine | registry:lib | A monophonic synth on the Web Audio API for a Pocket Synth state: noteOn starts a note or glides the held one, noteOff releases it, and the wave, filter and vo… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/pocket-synth-engine.json` |
| wave-shaper-device | registry:lib | The Wave Shaper as an instrument device: its waveform, drive, tone, detune, mix and volume, the pitch and resonance a pad position plays, and the distortion cu… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/wave-shaper-device.json` |
| wave-shaper-engine | registry:lib | A wave shaper synth on the Web Audio API for a Wave Shaper state: two detuned oscillators, a distortion mixed in parallel and a low-pass filter; noteOn starts … | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/wave-shaper-engine.json` |
| delay-device | registry:lib | The delay as a device: its time, feedback, tone and mix, the numbers that go on the nodes for a state and the echoes a state makes, with no panel and no audio … | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/delay-device.json` |
| delay-engine | registry:lib | A delay on the Web Audio API for a delay state: an echo that goes round a tone filter so each repeat is darker, mixed with the dry sound, with a time that bend… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/delay-engine.json` |
| reverb-device | registry:lib | The reverb as a device: its decay, pre-delay, damping and mix, the numbers that go on the nodes for a state, the decay a state draws and the impulse response o… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/reverb-device.json` |
| reverb-engine | registry:lib | A reverb on the Web Audio API for a reverb state: a convolver fed a room made from the decay and the damping, two of them cross-faded so a new room never click… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/reverb-engine.json` |
| filter-device | registry:lib | The filter as a device: a type, a cutoff and a resonance, the numbers that go on the node for a state and the curve a state plays, with no panel and no audio i… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/filter-device.json` |
| filter-engine | registry:lib | A filter on the Web Audio API for a filter state: the node the curve draws, with the resonance in the unit it wants, and the signal going round it when it is o… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/filter-engine.json` |
| distortion-device | registry:lib | The distortion as a device: a drive, a tone, a mix and an output level, the numbers that go on the nodes for a state, the soft clip and the transfer curve a st… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/distortion-device.json` |
| distortion-engine | registry:lib | A distortion on the Web Audio API for a distortion state: a drive gain into a fixed soft-clip table at 4x oversampling, a tone filter, mixed with the clean sou… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/distortion-engine.json` |
| chorus-device | registry:lib | The chorus as a device: a rate, a depth, a delay and a mix, the numbers that go on the nodes for a state and the sweep of the delay time, with no panel and no … | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/chorus-device.json` |
| chorus-engine | registry:lib | A chorus on the Web Audio API for a chorus state: a short delay whose time an oscillator sweeps, mixed with the dry sound, moving without a click. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/chorus-engine.json` |
| utility-device | registry:lib | The utility as a device: a gain, a pan, a stereo width, a mono switch and a phase invert, the numbers that go on the nodes for a state, with no panel and no au… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/utility-device.json` |
| utility-engine | registry:lib | A utility on the Web Audio API for a utility state: the signal split into mid and side, the side scaled by the width, then a pan and a gain with an optional ph… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/utility-engine.json` |
| limiter-device | registry:lib | The limiter as a device: an input gain, a ceiling and a release, the numbers that go on the nodes for a state and the curve a state plays, with no panel and no… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/limiter-device.json` |
| limiter-engine | registry:lib | A limiter on the Web Audio API for a limiter state: the browser compressor node at a ratio of 20 with no knee, its make-up taken back out, the signal going rou… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/limiter-engine.json` |
| gate-device | registry:lib | The gate as a device: a threshold, a floor, an attack, a hold, a release and a look-ahead, the numbers that go on the nodes for a state, the detector worklet a… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/gate-device.json` |
| gate-engine | registry:lib | A gate on the Web Audio API for a gate state: a worklet detector reads the key and writes the gain (threshold, attack, hold, release), and a delay in front of … | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/gate-engine.json` |
| saturator-device | registry:lib | The saturator as a device: a curve, a drive, a mix and an output level, the numbers that go on the nodes for a state, the four curves and the transfer curve a … | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/saturator-device.json` |
| saturator-engine | registry:lib | A saturator on the Web Audio API for a saturator state: a drive gain into the table of the chosen curve at 4x oversampling, mixed with the clean sound at an ou… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/saturator-engine.json` |
| phaser-device | registry:lib | The phaser-flanger as a device: a mode, a rate, a depth, a centre frequency, a delay, a feedback and a mix, the numbers that go on the nodes for a state and th… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/phaser-device.json` |
| phaser-engine | registry:lib | A phaser and flanger on the Web Audio API for a phaser state: four all-pass filters and a short delay swept by one oscillator, crossfaded by the mode, with fee… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/phaser-engine.json` |
| auto-pan-device | registry:lib | The auto pan as a device: a mode, a waveform, a rate and a depth, the numbers that go on the nodes for a state and the movement the oscillator makes, with no p… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/auto-pan-device.json` |
| auto-pan-engine | registry:lib | An auto pan and tremolo on the Web Audio API for an auto pan state: one oscillator that moves a stereo panner or the level of a gain, by the mode, at a rate, a… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/auto-pan-engine.json` |
| channel-eq-device | registry:lib | The channel EQ as a device: a low shelf, a sweepable mid bell, a high shelf, a high-pass switch and an output level, their filters as a state describes them an… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/channel-eq-device.json` |
| channel-eq-engine | registry:lib | A channel EQ on the Web Audio API for a channel EQ state: a high-pass, a low shelf, a mid bell and a high shelf in series with an output trim, the same filters… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/channel-eq-engine.json` |
| overdrive-device | registry:lib | The overdrive as a device: a band-pass before a soft clip with a drive, a tone and a mix, the numbers that go on the nodes for a state and the band that reache… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/overdrive-device.json` |
| overdrive-engine | registry:lib | An overdrive on the Web Audio API for an overdrive state: a band-pass, a drive gain, a soft-clip table at 4x oversampling and a tone filter, mixed with the cle… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/overdrive-engine.json` |
| deesser-device | registry:lib | The de-esser as a device: a frequency, a threshold, a ratio and a range, the numbers that go on the nodes for a state, the table that keeps the highs above the… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/deesser-device.json` |
| deesser-engine | registry:lib | A de-esser on the Web Audio API for a de-esser state: a Linkwitz-Riley split at the frequency, the highs read by the compressor's detector and taken down over … | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/deesser-engine.json` |
| multiband-device | registry:lib | The multiband compressor as a device: two splits and a threshold and ratio for each of the three bands, with an attack, a release and an output gain, the numbe… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/multiband-device.json` |
| multiband-engine | registry:lib | A multiband compressor on the Web Audio API for a multiband state: a Linkwitz-Riley split in three bands that add back flat, and for each band the compressor's… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/multiband-engine.json` |
| transient-device | registry:lib | The transient shaper as a device: an attack and a sustain, each up or down by 12 dB, and an output gain, the numbers that go on the nodes for a state and the s… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/transient-device.json` |
| transient-engine | registry:lib | A transient shaper on the Web Audio API for a transient state: a worklet detector reads the shape of the envelope and writes the gain, and the audio waits a mi… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/transient-engine.json` |
| mid-side-device | registry:lib | The mid/side device as a device: a level for the mid, a level for the side and a bass mono frequency, the numbers that go on the nodes for a state, with no pan… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/mid-side-device.json` |
| mid-side-engine | registry:lib | A mid/side device on the Web Audio API for a mid/side state: the signal split into mid and side, a level for each, a high-pass on the side for bass mono, and t… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/mid-side-engine.json` |
| key-detector | registry:lib | The detector of a key: an AudioWorklet loaded once per context from a blob, which reads a signal and writes the gain a compressor would apply to it. The compre… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/key-detector.json` |
| redux-device | registry:lib | The redux as a device: a number of bits, a downsample factor and a mix, the numbers that go on the nodes for a state, the stairs of the quantizer and the sourc… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/redux-device.json` |
| redux-engine | registry:lib | A redux on the Web Audio API for a redux state: a sample hold in an AudioWorklet loaded from a blob and a quantizer table for the bits, mixed with the clean so… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/redux-engine.json` |
| pink-noise | registry:lib | Pink noise as an audio buffer: equal energy per octave, so a flat equalizer looks flat on a spectrum. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/pink-noise.json` |
| device-measure | registry:lib | Measure an engine against what its device claims, in an offline audio context: how far its frequency response is from the curve the panel draws, how long it de… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/device-measure.json` |
| oversampling | registry:lib | What a waveshaper that oversamples costs in time, and a delay that holds a dry path back by it, so a distortion mixed with its dry sound does not comb. Measure… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/oversampling.json` |
| synced-rate | registry:lib | The rate of an oscillator that is either free, in hertz, or synced: one cycle per note value of the host's tempo. The two parameters a device adds for it, and … | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/synced-rate.json` |
| demo-loop | registry:lib | A two-second loop to put an effect on: a kick and a snare, a hat on the eighths and a short line of plucked notes, drawn once from the drum voices of the libra… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/demo-loop.json` |
| equalizer-device | registry:lib | The equalizer as a device: a low shelf, two bells and a high shelf with an output trim, their filters as a state describes them, and the curve a state plays, w… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/equalizer-device.json` |
| equalizer-engine | registry:lib | An equalizer on the Web Audio API for an equalizer state: four biquad filters in series with an output trim, the same filters its curve draws, moving without a… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/equalizer-engine.json` |
| arrangement | registry:lib | The pure side of an arrangement of clips on tracks: laying a clip so it covers what is under it, landing a dragged group (or its copies) on another track, shif… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/arrangement.json` |
| undo-history | registry:lib | Undo and redo as a value: a pure history of any document, with bursts (a drag is one entry), redo that drops on a new change, and a depth limit | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/undo-history.json` |
| piano-roll-tools | registry:lib | AI-native tool surface for a piano roll, createPianoRollTools builds typed, agent-agnostic tools (setNotes/addNotes/removeNotes/transpose/clear/setTempo) an LL… | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/piano-roll-tools.json` |
| drum-synthesis | registry:lib | One-shot percussion synthesis (kick, snare, hihat) built from oscillators and noise bursts, each with its own tune and decay | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/drum-synthesis.json` |
| waveform-peaks | registry:lib | Moved: the peaks are in @audio-ui/core/analysis and the decoding is audio-decode, as this lib gave both. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/waveform-peaks.json` |
| midi | registry:lib | Moved to @audio-ui/core/midi: installs the package. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/midi.json` |
| midi-input | registry:lib | Moved to @audio-ui/core/midi: installs the package. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/midi-input.json` |
| pitch-detection | registry:lib | Moved to @audio-ui/core/pitch: installs the package. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/pitch-detection.json` |
| musical-time | registry:lib | Moved to @audio-ui/core/time: installs the package. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/musical-time.json` |
| lookahead-scheduler | registry:lib | Moved to @audio-ui/core/time: installs the package. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/lookahead-scheduler.json` |
| spectrum | registry:lib | Moved to @audio-ui/core/analysis: installs the package. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/spectrum.json` |
| filter-response | registry:lib | Moved to @audio-ui/core/analysis: installs the package. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/filter-response.json` |
| web | registry:lib | Renamed to web-audio: installs it. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/web.json` |
| waveform-dsp | registry:lib | Renamed to waveform-peaks: installs it. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/waveform-dsp.json` |
| history | registry:lib | Renamed to undo-history: installs it. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/history.json` |
| synth-voice | registry:lib | Renamed to envelope-ramp: installs it. | `npx shadcn@latest add https://www.audio-ui.dev/r/{style}/synth-voice.json` |

## For AI agents

```text
You are adding components from @audio-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/audio-ui.md) for the component list.
2. Fetch the machine-readable index: https://www.audio-ui.dev/r/registry/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: audio-ui).
```