ActiveAnimated components196
@audio-ui
Animated components · MIT · data updated 2026-10-27
Accessible audio controls for React: knobs, faders, XY pads, meters, waveforms, timelines, sequencers and piano rolls, on headless primitives from @audio-ui/react.
accessibilityanimationaudioauthbackgroundsblocksbuttonscardschartsdesign-systemeditorformshooksnavigation
Install
npx shadcn@latest add https://www.audio-ui.dev/r/registry/registry.jsonHealth
StatusActive
Last committoday
LicenseMIT
Open issues1
ArchivedNo
Stars196
Components (235)
envelopeautomation-envelopearranged-cliptimeline-markerstrack-automationknobfaderxypadpadpianopiano-rollscale-menunote-findnote-edit-menutunerdevice-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-analyzerplotmeterneedle-meterwaveformclip-panelclip-viewmidi-clip-paneltimelinebpm-controlmidi-connect-controlsequencerscrubbertransportauto-panchannel-eqchoruscompressor
Components: envelope, automation-envelope, arranged-clip, timeline-markers, track-automation, knob, fader, xypad, pad, piano, piano-roll, scale-menu, note-find, note-edit-menu, 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, needle-meter, waveform, clip-panel, clip-view, midi-clip-panel, timeline, bpm-control, midi-connect-control, sequencer, scrubber, transport, auto-pan, channel-eq, chorus, compressor, deesser, delay, distortion, equalizer, filter, gate, limiter, mid-side, multiband, overdrive, phaser, pocket-synth, redux, reverb, saturator, transient, utility, wave-shaper, arrangement-editor, use-web-audio, use-playback-clock, use-simulated-clock, use-marquee-selection, use-arrangement, use-midi-playback, use-track-reorder, use-transport-clock, use-piano-roll-playback, use-undo-history, use-master-bus, use-synth-voices, use-midi-input, use-audio-signal, use-demo-source, use-audio-session, use-play-switch, 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-vertical-drag-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, scale-menu-demo, note-find-demo, note-edit-menu-demo, piano-roll-playback-demo, piano-roll-midi-file-demo, meter-size-default-demo, needle-meter-demo, meter-horizontal-demo, xypad-live-value-demo, xypad-bipolar-range-demo, block-waveform-player, timeline-clips-demo, block-timeline, waveform-demo, waveform-region-demo, waveform-live-demo, plot-demo, plot-filter-demo, plot-compressor-demo, block-compressor, block-equalizer, device-contract-demo, 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, device-measure, oversampling, synced-rate, demo-sound, equalizer-device, equalizer-engine, arrangement, undo-history, midi-file, 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