Installation

Add audiocn-svelte components to a shadcn-svelte project with the shadcn-svelte CLI.

2 min read · 360 words

audiocn-svelte is a shadcn-svelte registry. You add components with the same shadcn-svelte CLI you already use, and the code lands in your project.

Requirements

Svelte 5 and Tailwind CSS v4. Components use runes, so they need Svelte 5.
A project set up with shadcn-svelte. audiocn-svelte components use the standard shadcn tokens (background, muted, primary, ring…) and the cn helper from your utils alias.
Components are built on bits-ui. The CLI installs bits-ui for you if your project does not have it yet.

Set up shadcn-svelte

Skip this if your project already has a components.json.

$ pnpm dlx shadcn-svelte@latest init

$ npx shadcn-svelte@latest init

$ yarn dlx shadcn-svelte@latest init

$ bunx --bun shadcn-svelte@latest init

Check your aliases

The CLI writes files to the aliases in components.json. In a SvelteKit 3 project they use the #lib subpath import:

components.json

{
	"aliases": {
		"components": "#lib/components",
		"ui": "#lib/components/ui",
		"hooks": "#lib/hooks",
		"utils": "#lib/utils",
		"lib": "#lib"
	}
}

SvelteKit 2 projects use $lib instead. Either works: the CLI rewrites every import to your aliases.

Add a component

$ pnpm dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/level-meter.json

$ npx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/level-meter.json

$ yarn dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/level-meter.json

$ bunx --bun shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/level-meter.json

The 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

<script lang="ts">
	import { LevelMeter } from "#lib/components/ui/level-meter/index.js";

	let { peakDb }: { peakDb: number } = $props();
</script>

<LevelMeter aria-label="Microphone level" {peakDb} />

What gets installed

Path	What it is
`lib/components/ui/*`	The components, one folder each
`lib/hooks/use-*.svelte.ts`	Hooks: frame sources, Web Audio, mixer state
`lib/audio/*.ts`	The audio core: decibels, ballistics, tapers, types
Your global CSS file	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 custom aliases.

Existing projects

channel-strip uses the shadcn-svelte badge. If you have customised yours, answer No when the CLI asks to overwrite it.
The six audio tokens land in your global CSS file (the tailwind.css path in components.json). If your theme already has status colours, point the tokens at them instead (see Theming).
The code compiles against an ES2022 lib.

Install everything

Every block pulls in the components it uses. The full mixer installs most of the library in one step:

$ pnpm dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/system-audio-mixer.json

$ npx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/system-audio-mixer.json

$ yarn dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/system-audio-mixer.json

$ bunx --bun shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/system-audio-mixer.json