Audio components for React, built the shadcn way.
Level meters, visualizers, faders, knobs, channel strips, a complete mixer, players and sound pads.
Copy, paste, make them yours.

Docs · Installation · Components · Blocks · Theming

Why audiocn

• You own the code. It is not a package. Like shadcn/ui, every component is copied into your project with the shadcn CLI, so you can change anything.
• Themed by shadcn. Built on Base UI, styled with Tailwind CSS and themed with the same CSS variables as shadcn/ui. Any shadcn theme restyles audiocn.
• Fast by default. Meters and visualizers paint on the animation frame without re-rendering React, so a mixer with many channels stays smooth.
• Bring your own audio. Components receive levels and values; they never open a microphone themselves. Use the included Web Audio hooks, or feed them from any other engine.
• Real units. Mixer components speak decibels, the way audio engineers do.
• Accessible. Keyboard control on every fader, knob and strip, real ARIA roles and reduced-motion support.

Components

Blocks

Complete, working audio features composed from the components. Drop one in and ship.

Hooks

Web Audio plumbing so the components have something to show. Use them, or feed the components from your own engine.

Plus useAudioContext, useFrameSource, useLevel, useClipHold, useReducedMotion and useAudioConfig.

Quick start

audiocn is a shadcn registry. You need React 19.2 or later, Tailwind CSS v4 and a project set up with shadcn/ui.

1. Add the registry to components.json:

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

2. Add components. The CLI copies each one with everything it depends on: the audio core, the audio theme tokens and any hooks it uses.

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

3. Use them.

import { LevelMeter } from "@/components/ui/level-meter";

export const MicLevel = ({ peakDb }: { peakDb: number }) => (
  <LevelMeter aria-label="Microphone level" peakDb={peakDb} />
);

Full guide: audiocn.dev/docs/installation.

Develop

This repository is the docs site, the registry source and the component source in one Next.js app.

pnpm install
pnpm dev              # docs site on http://localhost:3000
pnpm test             # unit and component tests (Vitest)
pnpm test:e2e         # browser tests (Playwright)
pnpm test:install     # installs every registry item into a fresh app and type-checks it
pnpm typecheck
pnpm check            # lint and format check (Ultracite)
pnpm build            # examples, registry and site
pnpm og:build         # regenerate the social cards in public/og/

The screenshots in this README are the social cards captured at 2x into .github/readme/. pnpm og:build refreshes them alongside the social images.

Licence

MIT

Built by fortysevenfx and orcdev with 🪓🪓