sh4dcnv2 · atlas
← libraries

@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.

235 components react shadcn-cli MIT

Install this registry

shadcn (npm) npx shadcn@latest add https://www.audio-ui.dev/r/registry/registry.json
pnpm pnpm dlx shadcn@latest add https://www.audio-ui.dev/r/registry/registry.json
bun bunx shadcn@latest add https://www.audio-ui.dev/r/registry/registry.json
fetch registry curl -s https://www.audio-ui.dev/r/registry/registry.json

Components

235 total
envelope 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
automation-envelope ui

A track's automation over its lane in a timeline: an envelope along the whole arrangement, under the same zoom and scroll as the clips, whose line and points a…

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/automation-envelope.json
arranged-clip ui

A clip of an arrangement on its track's lane: move it, trim and fade it, pick a fade's curve, rename it in place and act on it from its menu. A MIDI clip draws…

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/arranged-clip.json
timeline-markers ui

Locators and time-signature changes on a timeline's lane: press one to jump there, rename or retype it in place, move a signature with the arrows, delete eithe…

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/timeline-markers.json
track-automation ui

A track's automation: a chooser of the parameter its lane shows, Volume or Pan, for its header, and that parameter's envelope over its lane, standing faint at …

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/track-automation.json
knob 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 ui

A linear slider for gain and other continuous parameters.

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/fader.json
xypad 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 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 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 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
scale-menu ui

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.

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/scale-menu.json
note-find ui

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. A form, or the for…

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/note-find.json
note-edit-menu ui

A menu of commands over a piano roll's notes (split, join, quantize, legato, time commands, fit to scale, chance, velocity), with their keys: items and submenu…

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/note-edit-menu.json
tuner 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 ui

Curves and draggable points, for equalizers, filters and compressors.

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/plot.json
meter 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
needle-meter ui

A needle meter: a dial in dB that a live level moves, with the VU or the PPM ballistics of @audio-ui/core/meter. The needle turns outside React, so the dial do…

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/needle-meter.json
waveform 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
clip-panel ui

The clip view of an arrangement's audio clip: a strip with its switch and name that rolls the view up, then Clip (start, end), Loop (switch, position, length, …

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/clip-panel.json
clip-view ui

The frame of a clip's detail view: a strip along its top (the caret that rolls the view up to it, the clip's switch, its name to rename, a status, actions), bo…

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/clip-view.json
midi-clip-panel ui

The clip view of an arrangement's MIDI clip: a strip with its switch and name that rolls the view up, then Clip (start, end), Loop (switch, position, length, ÷…

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/midi-clip-panel.json
timeline 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 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 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 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 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 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
auto-pan ui

The auto pan device in one install: its state, its Web Audio engine and its panel, to components/audio-ui/devices/auto-pan/.

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/auto-pan.json
channel-eq ui

The channel eq device in one install: its state, its Web Audio engine and its panel, to components/audio-ui/devices/channel-eq/.

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/channel-eq.json
chorus ui

The chorus device in one install: its state, its Web Audio engine and its panel, to components/audio-ui/devices/chorus/.

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/chorus.json
compressor ui

The compressor device in one install: its state, its Web Audio engine and its panel, to components/audio-ui/devices/compressor/.

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/compressor.json
deesser ui

The deesser device in one install: its state, its Web Audio engine and its panel, to components/audio-ui/devices/deesser/.

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/deesser.json
delay ui

The delay device in one install: its state, its Web Audio engine and its panel, to components/audio-ui/devices/delay/.

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/delay.json
distortion ui

The distortion device in one install: its state, its Web Audio engine and its panel, to components/audio-ui/devices/distortion/.

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/distortion.json
equalizer ui

The equalizer device in one install: its state, its Web Audio engine and its panel, to components/audio-ui/devices/equalizer/.

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/equalizer.json
filter ui

The filter device in one install: its state, its Web Audio engine and its panel, to components/audio-ui/devices/filter/.

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/filter.json
gate ui

The gate device in one install: its state, its Web Audio engine and its panel, to components/audio-ui/devices/gate/.

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/gate.json
limiter ui

The limiter device in one install: its state, its Web Audio engine and its panel, to components/audio-ui/devices/limiter/.

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/limiter.json
mid-side ui

The mid side device in one install: its state, its Web Audio engine and its panel, to components/audio-ui/devices/mid-side/.

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/mid-side.json
multiband ui

The multiband device in one install: its state, its Web Audio engine and its panel, to components/audio-ui/devices/multiband/.

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/multiband.json
overdrive ui

The overdrive device in one install: its state, its Web Audio engine and its panel, to components/audio-ui/devices/overdrive/.

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/overdrive.json
phaser ui

The phaser device in one install: its state, its Web Audio engine and its panel, to components/audio-ui/devices/phaser/.

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/phaser.json
pocket-synth ui

The pocket synth device in one install: its state, its Web Audio engine and its panel, to components/audio-ui/devices/pocket-synth/.

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/pocket-synth.json
redux ui

The redux device in one install: its state, its Web Audio engine and its panel, to components/audio-ui/devices/redux/.

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/redux.json
reverb ui

The reverb device in one install: its state, its Web Audio engine and its panel, to components/audio-ui/devices/reverb/.

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/reverb.json
saturator ui

The saturator device in one install: its state, its Web Audio engine and its panel, to components/audio-ui/devices/saturator/.

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/saturator.json
transient ui

The transient device in one install: its state, its Web Audio engine and its panel, to components/audio-ui/devices/transient/.

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/transient.json
utility ui

The utility device in one install: its state, its Web Audio engine and its panel, to components/audio-ui/devices/utility/.

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/utility.json
wave-shaper ui

The wave shaper device in one install: its state, its Web Audio engine and its panel, to components/audio-ui/devices/wave-shaper/.

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/wave-shaper.json
arrangement-editor ui

The parts of an arrangement editor in one install: the timeline, the arrangement's state, its clips, markers and automation, track reordering and MIDI playback…

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/arrangement-editor.json
use-web-audio 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 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 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 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 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-midi-playback hook

Plays an arrangement's MIDI clips while it plays: notes scheduled ahead on the audio clock, each MIDI track through a channel whose gain and pan follow its mix…

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/use-midi-playback.json
use-track-reorder hook

Reorders tracks: drag a track's grip to move it, with the view scrolling at its edges and a copy of its header under the pointer, or press Up and Down on the g…

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/use-track-reorder.json
use-transport-clock 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-piano-roll-playback hook

Plays a piano roll's notes, which you own: play, pause and stop, a loop or once through, a metronome, seeking, and the notes the roll auditions, with a playhea…

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/use-piano-roll-playback.json
use-undo-history hook

Undo and redo over a value you own: an edit made in one go, or a gesture that undoes as one.

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/use-undo-history.json
use-master-bus 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 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 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-audio-signal hook

An AnalyserNode as live signals for a waveform: the loudest sample of the moment, frequency bands and the raw samples, read every frame without re-rendering

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/use-audio-signal.json
use-demo-source hook

The sound a device plays: the one chosen in its session, such as from a preview's bar, else the one that shows best what the device does. It tells the session …

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/use-demo-source.json
use-audio-session hook

A session of its own for a demo and its controls: a play switch and a microphone switch that nothing outside it follows. Holds no audio, so two previews on a p…

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/use-audio-session.json
use-play-switch hook

The play switch of the nearest session: a button in its bar flips it, every component inside the session that reads it follows. Holds no audio, so a demo can l…

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/use-play-switch.json
use-microphone hook

The microphone as an AnalyserNode on the shared AudioContext: raw signal, never connected to the speakers, released on stop and on unmount. The session's switc…

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/use-microphone.json
use-pitch 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 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 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 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 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 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: it plays while the …

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/use-device-loop.json
use-pulses-through-compressor 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 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 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 example

Vertical fader

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/fader-vertical-demo.json
fader-horizontal-demo 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 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-vertical-drag-demo example

A knob turned by dragging up and down, like a fader: 150px of travel spans the whole range

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/knob-vertical-drag-demo.json
knob-demo example

Knob component example

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/knob-demo.json
knob-filter-control-demo 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 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 example

Envelope size default example

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/envelope-size-default-demo.json
envelope-adsr-demo 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 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 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 block

A MIDI clip editor: a scrolling roll with a playable keyboard down its side, a loop brace and a ruler that labels bars, beats and sixteenths as you zoom, and a…

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/block-piano-roll.json
scale-menu-demo example

A scale menu lighting the keys of the scale it picks

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/scale-menu-demo.json
note-find-demo example

Find notes on a piano roll by pitch, scale, state, velocity, length or chance, and select them

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/note-find-demo.json
note-edit-menu-demo example

A menu of note edits over a piano roll's selection, beside an item of its own

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/note-edit-menu-demo.json
piano-roll-playback-demo example

A one-bar piano roll on loop with a metronome, played by a synth, which hears edits on its next pass

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/piano-roll-playback-demo.json
piano-roll-midi-file-demo example

A piano roll that exports its clip as a .mid file and imports one onto its grid, with the file's tempo

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/piano-roll-midi-file-demo.json
meter-size-default-demo example

Meter size default example

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/meter-size-default-demo.json
needle-meter-demo example

A VU needle that follows the microphone when it is on, and a moving signal when it is not

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/needle-meter-demo.json
meter-horizontal-demo example

Horizontal meter example

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/meter-horizontal-demo.json
xypad-live-value-demo 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 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 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
timeline-clips-demo example

A timeline with a loop range, a ruler and two tracks, each with a clip you move, trim and fade, and a playhead on a clock: the timeline alone, with no arrangem…

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/timeline-clips-demo.json
block-timeline 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 example

Waveform default example

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/waveform-demo.json
waveform-region-demo 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 example

Live waveform scrolling with the microphone, or with a speech-like signal while it is off

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/waveform-live-demo.json
plot-demo 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 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 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 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 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
device-contract-demo example

A device of your own, defined by its parameters alone: the panel, the state and the tool an agent calls come from that one description. Turn a knob, or send th…

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/device-contract-demo.json
block-delay 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 example

Press play, or play a MIDI keyboard, and watch the spectrum: each 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 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 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 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 lib

Web Audio Lib

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/web-audio.json
envelope-ramp 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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
device-measure 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 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 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-sound lib

The sounds the previews play, by name: Boom bap and Drone, with the kick that goes with the first. Drawn once in code and looped as a buffer, no samples.

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/demo-sound.json
equalizer-device 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 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 lib

The document of an arrangement of clips on tracks: its clips, tracks and mixes, how far a clip reaches, where a MIDI clip's notes play, and what a track's volu…

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/arrangement.json
undo-history 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
midi-file lib

MIDI files to and from notes on a grid of steps: read one, with its tempo, write one, or download one

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/midi-file.json
piano-roll-tools 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 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 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 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 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 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 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 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 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 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 lib

Renamed to web-audio: installs it.

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/web.json
waveform-dsp lib

Renamed to waveform-peaks: installs it.

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/waveform-dsp.json
history lib

Renamed to undo-history: installs it.

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/history.json
synth-voice lib

Renamed to envelope-ramp: installs it.

npx shadcn@latest add https://www.audio-ui.dev/r/{style}/synth-voice.json