audiocn: React Audio Components for shadcn/ui

audiocn is a React and shadcn/ui component registry that installs audio meters, visualizers, controls, players, and mixer UI as editable source files.

It is built for browser audio apps that work with real dB values and Web Audio data. The shadcn CLI copies each registry item into the project, where the code can be edited locally.

Features

• 20+ React audio components for metering, visualization, mixing, playback, and sound triggering.
• 6+ audio blocks for system mixing, microphone setup, soundboards, music playback, system-audio controls, and quick audio access.
• 15+ hooks for capture, analysis, mixer state, playback, devices, waveform data, frame sources, and audio state.
• Tailwind CSS styling with shadcn theme tokens and six audio-specific color tokens.
• Base UI primitives for interactive controls.
• Decibel-based meters, faders, and mixer controls.
• Animation-frame painting for meters and visualizers outside React render cycles.
• Keyboard control, ARIA meter state, and reduced-motion behavior.

Use Cases

• Recording and streaming dashboards with peak/RMS meters, clipping state, gain, pan, mute, solo, and monitoring.
• Microphone setup screens with device selection, live levels, gain, mute, and permission state.
• Music or podcast players with waveform seeking, track navigation, loop, playback rate, and volume.
• Soundboards and browser audio apps that need hotkeys, short-sound playback, system-audio capture, or reusable mixer controls.

How to Use audiocn

Initialize shadcn/ui

Run the initializer when the project does not have a components.json file:

npx shadcn@latest init

Register audiocn

Set the @audiocn namespace in components.json:

{
  "registries": {
    "@audiocn": "https://audiocn.dev/r/{name}.json"
  }
}

Install a Component or Block

Install components with the shadcn CLI:

npx shadcn@latest add @audiocn/level-meter

The System Audio Mixer pulls in most of the library:

npx shadcn@latest add @audiocn/system-audio-mixer

Basic Usage

import { LevelMeter } from "@/components/ui/level-meter";
export const MicLevel = ({ peakDb }: { peakDb: number }) => (
  <LevelMeter aria-label="Microphone level" peakDb={peakDb} />
);

Default File Placement

The CLI follows the aliases in components.json. A project using src/ or custom aliases receives the files under those mapped locations.

Available Components

Audio Blocks

Audio Hooks

LevelMeter API

Styling and Theming

audiocn uses standard shadcn tokens for normal component styling. Installing the first registry item writes six audio tokens to the project CSS. Each token also has a -foreground counterpart for text, and the token names are available as Tailwind colors.

Override an Audio Token

:root {
  --meter-ok: oklch(0.72 0.12 200);
}
.dark {
  --meter-ok: oklch(0.78 0.12 200);
}

Alternatives and Related Resources

• 700+ UI Sound Effects for Modern Web Apps – soundcn
• Build Multimodal AI Agent with shadcn/ui & ElevenLabs UI
• Multi-Track Audio Editor Built with React and the Web Audio API – Waveform Playlist | Reactscript