@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.
Install this registry
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 curl -s https://www.audio-ui.dev/r/registry/registry.json Components
235 totalAn 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 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 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 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 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 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 A linear slider for gain and other continuous parameters.
npx shadcn@latest add https://www.audio-ui.dev/r/{style}/fader.json 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 Curves and draggable points, for equalizers, filters and compressors.
npx shadcn@latest add https://www.audio-ui.dev/r/{style}/plot.json 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 Vertical fader
npx shadcn@latest add https://www.audio-ui.dev/r/{style}/fader-vertical-demo.json Fader component example with horizontal orientation
npx shadcn@latest add https://www.audio-ui.dev/r/{style}/fader-horizontal-demo.json 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 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 component example
npx shadcn@latest add https://www.audio-ui.dev/r/{style}/knob-demo.json 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 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 example
npx shadcn@latest add https://www.audio-ui.dev/r/{style}/envelope-size-default-demo.json 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 example
npx shadcn@latest add https://www.audio-ui.dev/r/{style}/piano-size-default-demo.json Piano lit from an external source via activeNotes
npx shadcn@latest add https://www.audio-ui.dev/r/{style}/piano-active-notes-demo.json 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 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 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 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 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 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 example
npx shadcn@latest add https://www.audio-ui.dev/r/{style}/meter-size-default-demo.json 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 Horizontal meter example
npx shadcn@latest add https://www.audio-ui.dev/r/{style}/meter-horizontal-demo.json XYPad with live x/y readout
npx shadcn@latest add https://www.audio-ui.dev/r/{style}/xypad-live-value-demo.json XYPad with bipolar pan/mix style ranges
npx shadcn@latest add https://www.audio-ui.dev/r/{style}/xypad-bipolar-range-demo.json 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 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 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 default example
npx shadcn@latest add https://www.audio-ui.dev/r/{style}/waveform-demo.json 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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
npx shadcn@latest add https://www.audio-ui.dev/r/{style}/web-audio.json 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 Moved to @audio-ui/core/midi: installs the package.
npx shadcn@latest add https://www.audio-ui.dev/r/{style}/midi.json Moved to @audio-ui/core/midi: installs the package.
npx shadcn@latest add https://www.audio-ui.dev/r/{style}/midi-input.json Moved to @audio-ui/core/pitch: installs the package.
npx shadcn@latest add https://www.audio-ui.dev/r/{style}/pitch-detection.json Moved to @audio-ui/core/time: installs the package.
npx shadcn@latest add https://www.audio-ui.dev/r/{style}/musical-time.json Moved to @audio-ui/core/time: installs the package.
npx shadcn@latest add https://www.audio-ui.dev/r/{style}/lookahead-scheduler.json Moved to @audio-ui/core/analysis: installs the package.
npx shadcn@latest add https://www.audio-ui.dev/r/{style}/spectrum.json Moved to @audio-ui/core/analysis: installs the package.
npx shadcn@latest add https://www.audio-ui.dev/r/{style}/filter-response.json Renamed to web-audio: installs it.
npx shadcn@latest add https://www.audio-ui.dev/r/{style}/web.json Renamed to waveform-peaks: installs it.
npx shadcn@latest add https://www.audio-ui.dev/r/{style}/waveform-dsp.json Renamed to undo-history: installs it.
npx shadcn@latest add https://www.audio-ui.dev/r/{style}/history.json Renamed to envelope-ramp: installs it.
npx shadcn@latest add https://www.audio-ui.dev/r/{style}/synth-voice.json