audiocnInstallation
Add the audiocn registry to a shadcn/ui project and install components with the shadcn CLI.
audiocn is a shadcn registry. You add components with the same shadcn CLI you already use, and the code lands in your project.
Requirements
- React 19 and Tailwind CSS v4.
- A project set up with shadcn/ui. audiocn components use the standard shadcn tokens (
background,muted,primary,ring…) and thecnhelper from@/lib/utils. - Components are built on Base UI. The CLI installs
@base-ui/reactfor you, so they also work in projects whose other shadcn components use Radix.
Set up shadcn/ui
Skip this if your project already has a components.json.
$ pnpm dlx shadcn@latest initAdd the registry
Add the @audiocn namespace to components.json:
{
"registries": {
"@audiocn": "https://audiocn.dev/r/{name}.json"
}
}Add a component
$ pnpm dlx shadcn@latest add @audiocn/level-meterThe CLI copies the component and everything it depends on: the audio core (lib/audio), the audio theme tokens, and any hooks it uses.
Use it
import { LevelMeter } from "@/components/ui/level-meter";
export const MicLevel = ({ peakDb }: { peakDb: number }) => (
<LevelMeter aria-label="Microphone level" peakDb={peakDb} />
);What gets installed
| Path | What it is |
|---|---|
components/ui/* | The components, one file each |
hooks/use-*.ts | Hooks: frame sources, Web Audio, mixer state |
lib/audio/*.ts | The audio core: decibels, ballistics, tapers, types |
app/globals.css | Six audio tokens: --meter-ok, --meter-warn, --meter-clip, --channel-mute, --channel-solo, --channel-monitor |
The paths follow the aliases in your components.json, so they adapt to projects with a src folder or custom aliases.
Install everything
Every block pulls in the components it uses. The full mixer installs most of the library in one step:
$ pnpm dlx shadcn@latest add @audiocn/system-audio-mixer