This guide walks you through the essential steps to add audio/ui to your shadcn project.
Prerequisites
audio/ui is built on React 19 and Tailwind CSS v4. Ensure your project is set up with these technologies before proceeding. We recommend following the Official shadcn/ui Installation Guide to prepare your environment.
Setup the audio/ui Registry
Add the audio/ui registry namespace to your components.json and set your component library and style. Learn more about registry config from shadcn registry docs.
{
"registries": {
"@audio": "https://audio-ui.xyz/r/{style}/{name}.json"
}
}Components
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/….
Styling
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.
AI-Enhanced Workflow
audio/ui is designed from the ground up to be AI-friendly, making it easier for language models to understand and modify your UI.
- llms.txt: Access our llms.txt file for a structured map of our documentation and architecture optimized for AI agents.
- Copy Markdown: Every page includes a Copy Markdown feature, allowing you to instantly feed documentation or code into your AI-driven development workflows.
Next Steps
Head over to the Audio Player docs to install your first component, or browse the component catalog for ready-to-use blocks.