audiocn / ui

Audio components for React, built the shadcn way. 
Level meters, visualizers, faders, knobs, channel strips, a complete mixer, players and sound pads. 
Copy, paste, make them yours. 
 Docs ·
 Installation ·
 Components ·
 Blocks ·
 Theming 
## Why audiocn
- **You own the code.** It is not a package. Like shadcn/ui, every component is copied into your project with the shadcn CLI, so you can change anything.
- **Themed by shadcn.** Built on Base UI, styled with Tailwind CSS and themed with the same CSS variables as shadcn/ui. Any shadcn theme restyles audiocn.
- **Fast by default.** Meters and visualizers paint on the animation frame without re-rendering React, so a mixer with many channels stays smooth.
- **Bring your own audio.** Components receive levels and values; they never open a microphone themselves. Use the included Web Audio hooks, or feed them from any other engine.
- **Real units.** Mixer components speak decibels, the way audio engineers do.
- **Accessible.** Keyboard control on every fader, knob and strip, real ARIA roles and reduced-motion support.
## Components
 All 23 components 
**Meters and visualizers**
| Component | What it does |
| --- | --- |
| Level Meter | Peak and RMS meter with zones, peak hold, a scale, a readout and a clip light |
| dB Scale | Tick marks and labels for a decibel range, shared by meters and faders |
| dB Readout | A numeric level label that updates at a readable rate and never shifts the layout |
| Clip Indicator | A clip light that holds after the signal clips, with a count and click to reset |
| Bar Visualizer | Bars driven by frequency bands, with idle, loading and mirrored modes |
| Electric Bar Visualizer | Bars as crackling filaments, with arcs between loud neighbours and sparks |
| Electric Waveform | One electric line with a white-hot core, a tall glow, forks and sparks |
| Smooth Waveform | A clean line that follows the sound, as a flowing wave or an oscilloscope trace |
| Live Waveform | A canvas waveform of a live signal, as scrolling history or the current frame |
| Waveform | A clip's waveform with a playhead, seeking, hover time, regions and markers |
| Spectrum | A frequency spectrum analyser with axes, a grid and peak hold |
**Controls**
| Component | What it does |
| --- | --- |
| Fader | A volume fader in decibels, with tapers, detents, a scale, reset and an editable value |
| Parameter Slider | A labelled slider with a numeric input, unit, marks and reset |
| Knob | A rotary control for dense layouts, drawn in SVG |
| LCD Display | A themeable dot-matrix screen, backlit or glowing, with dropdown rows |
| Pan Control | Left and right balance with a fill from the centre and a centre detent |
| Channel Toggle | Mute, solo and monitor buttons with their own pressed colours |
| Volume Control | A simple volume slider with a mute button, for players |
| Audio Device Select | A microphone, speaker or source picker with permission and disconnected states |
**Mixer**
| Component | What it does