Audiocn

Overview

audiocn is a collection of copy-and-paste audio components for React and shadcn/ui, built by fortysevenfx and orcdev. It covers level meters, visualizers, faders, knobs, channel strips, a complete mixer, players and sound pads, all installed as source through the shadcn CLI.

The components are themed by the standard shadcn CSS variables and include color themes such as Stone, Ocean, Rose, Forest, Violet and Mono. They receive levels and values rather than opening audio devices themselves, so they can be fed by the included Web Audio hooks or another engine. The registry ships 25 components, 18 hooks and 6 blocks.

Features

• Meters and visualizers: Level meter with peak and RMS, dB scale and readout, clip indicator, LCD meter, bar and electric visualizers, waveforms and spectrum.
• Controls: Decibel fader, parameter slider, knob, LCD display, pan control, channel toggles, volume control and audio device select.
• Mixer: Composable channel strips and a full mixer with shared metering and keyboard navigation.
• Players and pads: Audio player, track list and sound pad with hotkeys.
• Blocks: System audio mixer, music player, soundboard, mic setup, quick audio popover and system audio settings.
• Web Audio hooks: Microphone, system audio capture, analyser, mixer, gain node, waveform data and audio devices.
• Accessible: Keyboard control, ARIA roles and reduced-motion support.

Tech stack

• React
• shadcn/ui, Tailwind CSS
• Base UI, class-variance-authority, Phosphor Icons
• Web Audio API

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @audiocn/component-name