Introduction

audio/ui is a set of accessible and composable Audio UI components. Built on top of shadcn/ui, it's designed for you to copy, paste, and own.

This is not a component library. It is how you build your audio component library.

You know how most traditional component libraries work: you install a package from NPM, import the components, and use them in your app. This works well until you need to customize a component to fit your design system, or need one that isn't included. Often you end up wrapping library components, overriding styles, or mixing components from different libraries with incompatible APIs.

Open Code

audio/ui hands you the actual component code. You have full control to customize and extend the components to your needs:

• Full Transparency: You see exactly how each component is built.
• Easy Customization: Modify any part of a component to fit your design and functionality requirements.
• AI Integration: Access to the code makes it straightforward for LLMs to read, understand, and even improve your components.

Composition

Every component in audio/ui shares a common, composable interface. Browse the component catalog for composed examples by category, or install primitives and blocks straight from the registry — copy-ready layouts and lower-level pieces so you can pick the right level of abstraction for each screen.

Beautiful Defaults

audio/ui comes with a collection of components that have carefully chosen default styles, designed to look good on their own and to work well together as a consistent system.

AI-Ready

The design of audio/ui makes it easy for AI tools to work with your code. Its open code and consistent API allow AI models to read, understand, and even generate new components.

Open Source

This project is open source. We welcome contributions, feedback, or improvements. Check out our repository on GitHub.

Next Steps

Ready to get started? Head over to the Get started guide to add audio/ui to your project.