A quick guide to adding audio/ui components to your application.
This guide shows how to add audio/ui to a shadcn project. If you do not use shadcn/ui, install the headless primitives with npm install @audio-ui/react instead, see the Introduction.
audio/ui is built on React 19 and Tailwind CSS v4. Set up both first. The shadcn/ui installation guide covers the environment.
Add the audio/ui registry namespace to your components.json and set your component library and style. See the shadcn registry docs for the registry config.
{
"registries": {
"@audio": "https://audio-ui.dev/r/{style}/{name}.json"
}
}You can install audio/ui using the shadcn CLI for automation or by manual installation for full control. Both methods apply to everything in Docs and the component catalog, including the block-* blocks and demos you install with @audio/….
Components are styled with a design token system defined by CSS variables and implemented with Tailwind CSS, following the same conventions as shadcn/ui so they're fully customizable. See the Styling guide for details.
audio/ui is designed to be used by AI coding agents.
npx skills add ouestlabs/audio-ui teaches your agent which layer to pick and how to install and wire each component.https://audio-ui.dev/mcp so your agent can list components, read their docs and search the catalog.Head over to the Knob docs to install your first component, or browse the component catalog for ready-to-use blocks.