Dev Design Library

audiocn components

Audio UI components for React, built the shadcn way.

Components
32
Framework
React
Stack
React, TypeScript, Tailwind
License
MIT
GitHub stars
229
Source
https://github.com/audiocn/ui
Website
https://audiocn.dev
Install
npx shadcn@latest add @audiocn/{name}

All audiocn components

  • Audio Device Select: A microphone, speaker or source picker with loading, permission, None and disconnected-device states, and a slot for a live preview.
  • Audio Player: A composable audio player: transport, seek bar with buffering, time, volume, playback rate, loop and keyboard shortcuts.
  • Bar Visualizer: A row of bars driven by frequency bands, with idle, loading and mirrored modes. Bars paint without re-rendering React.
  • Channel Strip: One channel of a mixer: header, status, meter, fader, value, controls and a notice, as a row or a console strip. The master strip is a…
  • Channel Toggle: Mute, solo and monitor toggle buttons with their own pressed colours.
  • Clip Indicator: A clip light that holds after the signal clips, with an optional count and click to reset.
  • dB Readout: A numeric level label that updates at a readable rate, with a reserved width so the layout never shifts.
  • dB Scale: Tick marks and labels for a decibel range, shared by meters and faders.
  • Electric Bar Visualizer: Frequency-band bars drawn as crackling filaments, with arcs between loud neighbours and sparks on sudden rises. Takes its colour from the…
  • Electric Waveform: One electric line across the width: a crackling, white-hot trace with a tall glow, forks off the peaks and sparks. Follows the frequency…
  • Fader: A volume fader in decibels: linear or console taper, detents, a scale, reset, an editable value, silence at the bottom, horizontal or…
  • Knob: A rotary control drawn in SVG, with vertical, horizontal or circular dragging, fine adjustment, reset, a bipolar origin, an optional click…
  • LCD Display: A dot-matrix screen in a bezel, backlit in the light theme and glowing in the dark one: rows of dim labels and bright values in the theme…
  • LCD Meter: A recorder-style level meter on an LCD Display's screen: block segments in the display's ink that light whole, a held peak segment…
  • Level Meter: A peak and RMS level meter: mono or stereo, horizontal or vertical, solid, segmented or gradient, with zones, peak hold, a scale, a…
  • Live Waveform: A canvas waveform of a live signal: scrolling level history or the current frame, as bars, a mirrored shape or a line.
  • Microphone Setup: Choose and check a microphone: device select with a live preview, a level meter, gain, mute and a level check that says whether you sound…
  • Mixer: The container for channel strips: shared meter settings, keyboard navigation between strips, a master area and an empty state.
  • Music Player: A playlist player with a waveform seek bar, shuffle, repeat, volume and optional ducking under the microphone.
  • Pan Control: Left and right balance with a fill from the centre, a centre detent and reset.
  • Parameter Slider: A labelled slider with a numeric input, unit, marks, reset and a linear or log scale, for gain trims, delays, thresholds and frequencies.
  • Quick Audio Popover: Compact microphone and system audio controls behind one toolbar button that shows a live level.
  • Smooth Waveform: One clean line across the width that follows the sound, as a smooth wave shaped by the frequency bands or a triggered oscilloscope trace.
  • Sound Pad: A trigger pad with one-shot, toggle, hold and loop modes, a hotkey, playback progress and an accent colour, plus a grid with hotkeys and…
  • Soundboard: A grid of sound pads with global hotkeys, per-pad mode and volume in a context menu, master volume, stop all, and drag-and-drop to add…
  • Spectrum: A frequency spectrum analyser drawn on canvas as bars, a line or an area, with peak hold, a grid and frequency and level axes.
  • System Audio Mixer: The complete mixer: microphone, system audio, music and sound pads with meters, faders, mute, solo, monitor and ducking, a limited master…
  • System Audio Settings: Turn system audio capture on, set its level, watch its meter and explain what the browser will capture.
  • Tempo Control: An editable BPM input with tap tempo, keyboard stepping and a rolling average.
  • Track List: A list of tracks with active and playing states, arrow-key navigation and slots for artwork, duration and actions.
  • Volume Control: A 0..1 volume slider with a mute button and a perceptual curve, for players.
  • Waveform: A static waveform of a clip with a smooth playhead, seeking by pointer and keyboard, hover time, draggable regions and markers.

Browse by category