ActiveAnimated components194
@audio-ui
Animated components · MIT · data updated 2026-10-17
Accessible audio controls for React: knobs, faders, XY pads, meters, waveforms, timelines, sequencers and piano rolls, on headless primitives from @audio-ui/react.
accessibilityanimationaudiobackgroundsblocksbuttonscardschartsdesign-systemformshooks
Install
npx shadcn@latest add https://www.audio-ui.dev/r/registry/registry.jsonHealth
StatusActive
Last committoday
LicenseMIT
Open issues2
ArchivedNo
Stars194
Components (184)
envelopeknobfaderxypadpadpianopiano-rolltunerdevice-panelcompressor-panelpocket-synth-panelwaveform-selectfilter-type-selectcurve-selectplay-togglewave-shaper-paneldelay-panelreverb-panelfilter-paneldistortion-panelchorus-panelutility-panellimiter-panelgate-panelsaturator-panelphaser-panelauto-pan-panelchannel-eq-paneloverdrive-paneldeesser-panelmultiband-paneltransient-panelmid-side-panelredux-panelequalizer-panelspectrum-analyzerplotmeterwaveformtimelinebpm-controlmidi-connect-controlsequencerscrubbertransportuse-web-audiouse-playback-clockuse-simulated-clockuse-marquee-selectionuse-arrangementuse-transport-clockuse-master-bususe-synth-voicesuse-midi-inputuse-microphoneuse-pitchuse-audio-levelsuse-simulated-levelsuse-spectrumuse-noise-through-eq
Components: envelope, knob, fader, xypad, pad, piano, piano-roll, tuner, device-panel, compressor-panel, pocket-synth-panel, waveform-select, filter-type-select, curve-select, play-toggle, wave-shaper-panel, delay-panel, reverb-panel, filter-panel, distortion-panel, chorus-panel, utility-panel, limiter-panel, gate-panel, saturator-panel, phaser-panel, auto-pan-panel, channel-eq-panel, overdrive-panel, deesser-panel, multiband-panel, transient-panel, mid-side-panel, redux-panel, equalizer-panel, spectrum-analyzer, plot, meter, waveform, timeline, bpm-control, midi-connect-control, sequencer, scrubber, transport, use-web-audio, use-playback-clock, use-simulated-clock, use-marquee-selection, use-arrangement, use-transport-clock, use-master-bus, use-synth-voices, use-midi-input, use-microphone, use-pitch, use-audio-levels, use-simulated-levels, use-spectrum, use-noise-through-eq, use-device-loop, use-pulses-through-compressor, block-pocket-synth, block-wave-shaper, fader-vertical-demo, fader-horizontal-demo, fader-pan-demo, knob-demo, knob-filter-control-demo, knob-arc-and-anchor-demo, envelope-size-default-demo, envelope-adsr-demo, piano-size-default-demo, piano-active-notes-demo, block-piano-roll, meter-size-default-demo, meter-horizontal-demo, xypad-live-value-demo, xypad-bipolar-range-demo, block-waveform-player, block-timeline, waveform-demo, waveform-region-demo, waveform-live-demo, plot-demo, plot-filter-demo, plot-compressor-demo, block-compressor, block-equalizer, block-delay, block-reverb, block-filter, block-distortion, block-chorus, block-utility, block-limiter, block-gate, block-saturator, block-phaser, block-auto-pan, block-channel-eq, block-overdrive, block-deesser, block-multiband, block-transient, block-mid-side, block-redux, block-mixer, block-drum-rack, pad-demo, tuner-demo, spectrum-analyzer-demo, sequencer-demo, scrubber-demo, transport-demo, web-audio, envelope-ramp, audio-decode, compressor-device, compressor-engine, pocket-synth-device, pocket-synth-engine, wave-shaper-device, wave-shaper-engine, delay-device, delay-engine, reverb-device, reverb-engine, filter-device, filter-engine, distortion-device, distortion-engine, chorus-device, chorus-engine, utility-device, utility-engine, limiter-device, limiter-engine, gate-device, gate-engine, saturator-device, saturator-engine, phaser-device, phaser-engine, auto-pan-device, auto-pan-engine, channel-eq-device, channel-eq-engine, overdrive-device, overdrive-engine, deesser-device, deesser-engine, multiband-device, multiband-engine, transient-device, transient-engine, mid-side-device, mid-side-engine, key-detector, redux-device, redux-engine, pink-noise, device-measure, oversampling, synced-rate, demo-loop, equalizer-device, equalizer-engine, arrangement, undo-history, piano-roll-tools, drum-synthesis, waveform-peaks, midi, midi-input, pitch-detection, musical-time, lookahead-scheduler, spectrum, filter-response, web, waveform-dsp, history, synth-voicePreview
Live sandbox previews render component source client-side. Where a component can’t be rendered standalone, sh4dcn falls back to its source and install command.
@audio-ui · envelope
npx shadcn@latest add https://www.audio-ui.dev/r/{style}/envelope.jsonView source