audiocn Solid

Overview

audiocn Solid is a Solid port of audiocn, the audio component collection for shadcn/ui, made by jhomra21 (the original audiocn is by fortysevenfx and orcdev). It provides level meters, visualizers, faders, knobs, channel strips, a complete mixer, players and sound pads as source copied in with the shadcn CLI, with no runtime component package.

The registry ships 23 components, 6 blocks and 18 hooks, styled with Tailwind CSS v4 and the standard shadcn CSS variables, and it is MIT licensed. Components receive levels and values rather than opening a microphone themselves, and mixer controls work in decibels. It targets Solid 1 (1.9.15 or later) and Solid 2.

Features

• Meters and visualizers: Level meter with peak and RMS, dB scale and readout, clip indicator, bar and electric visualizers, smooth, live and clip waveforms and a spectrum analyser.
• Controls: Decibel fader with tapers and detents, parameter slider, knob, LCD display, pan control, channel toggle, volume control and device select.
• Mixer: Channel strips and a mixer with shared meter settings and keyboard navigation.
• Sounds and music: Audio player, track list and sound pad.
• Blocks: System audio mixer, music player, soundboard, microphone setup, quick audio popover and system audio settings.
• Web Audio hooks: useMicrophone, useSystemAudio, useAudioAnalyser, useWebAudioMixer, useSound, useWaveformData and more.
• Accessible: Keyboard control, ARIA roles and reduced-motion support.

Tech stack

• Solid 1.9.15+ and Solid 2
• Tailwind CSS v4
• shadcn registry
• Web Audio API

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @audiocn-solid/component-name