Audiocn releases 23 React audio components in the shadcn style, with meters, faders and a mixer

Any team adding a volume fader or a level meter to a React app has had to write it from scratch, and the result rarely matches what audio engineers expect to see on a mixing console. A new library called audiocn released 23 React components for audio interfaces on 30 September 2026, including level meters, faders, knobs, a spectrum analyser, several kinds of waveform and a complete channel-strip mixer. The project is MIT-licensed and had 125 GitHub stars three days after its first commit. Audiocn follows the shadcn/ui model, so the components are source files that a shadcn CLI command copies into the project. The team then owns every line and can edit any component.

Audiocn builds on Base UI, Tailwind CSS v4 and the Web Audio API, and targets React 19.2. The library ships 23 components, 6 blocks and 16 hooks, each listed on audiocn.dev with a live demo. Audiocn says meters and visualisers paint on the animation frame rather than re-render React, so a mixer with many channels stays smooth, and that mixer components work in decibels rather than a 0 to 1 scale.

The components receive signal levels and values as props. They never open a microphone themselves, so a team feeds them from the included Web Audio hooks or from a different audio engine. Audiocn also says every fader, knob and strip has keyboard control, that the components use real ARIA roles, and that they respect the browser's reduced-motion preference.

Because the components use the same CSS variables as shadcn/ui, audiocn says any shadcn theme restyles the audio controls at the same time as the rest of the application. The homepage demonstrates five preset themes against the live mixer, including Stone, Ocean, Rose, Forest and Violet. The license is MIT.

The library covers meters and visualisers such as the level meter, dB scale, dB readout, clip indicator, bar visualiser, spectrum, waveform, live waveform and electric variants. The controls cover fader, parameter slider, knob, pan control and channel toggle. The complete pieces are an audio player, sound pads and a five-channel mixer.

For a team shipping a product with any audio interface, a podcast app, a music player, a meeting tool or a voice-chat room, audiocn provides a drop-in library of parts that use real audio units and real keyboard handling. A volume fader with a decibel taper, a reset detent, a numeric input and the right ARIA role is the sort of work that a team can spend days on and still get wrong, and the audiocn component is a hundred lines that a team can paste in and change.

Source

• Audiocn repository on GitHub: github.com/audiocn/ui
• Audiocn documentation and live demo: audiocn.dev