# [AudioCN UI](<https://github.com/audiocn/ui>)

Open-source React audio components built the shadcn way, including meters, visualizers, faders, knobs, mixers, players, and sound pads.

Free·Audio UI·React·shadcn·Web Audio·Open Source

Free·Audio UI·React·shadcn·Web Audio+1

![AudioCN UI preview 1](<https://creatorstoolbox.com/images/previews/audiocn-ui-87da3e4c733d92d0705803597bf4a597dd98bd2f7af48c047705dc7aa0c25132.png>)

## What is AudioCN UI?

AudioCN UI is an open-source collection of audio interface components for React. It includes level meters, visualizers, faders, knobs, channel strips, mixers, players, and sound pads, along with Web Audio hooks. Install components through the shadcn CLI and add their source directly to your project.

It uses Base UI and Tailwind CSS v4, supports shadcn-style theming, and includes keyboard and screen-reader accessibility support.

## Features

- React audio controls including meters, faders, knobs, and channel strips

- Visualizers, mixers, players, and sound pads

- Web Audio hooks for audio-powered interfaces

- Install editable component source with the shadcn CLI

- Keyboard, screen-reader, and reduced-motion support

## FAQs

Common questions about AudioCN UI

What is AudioCN UI?

An open-source library of React audio interface components, including meters, visualizers, faders, knobs, mixers, players, and sound pads.

How do I add components?

Use the shadcn CLI to add component source directly to your project.

Is AudioCN UI free?

Yes. The repository is open source under the MIT license.

Similar Launches

[![useLayouts](<https://www.google.com/s2/favicons?domain=uselayouts.com&sz=128>)

useLayouts

Free animated React components and micro-interactions built with Framer Motion and Tailwind CSS, designed to work with shadcn/ui.](<https://creatorstoolbox.com/resources/uselayouts>)[![Dot Matrix](<https://dotmatrix.zzzzshawn.cloud/icon.svg>)

Dot Matrix

Open-source React component library of 55+ expressive dot-matrix loaders — install via the shadcn registry and own the code locally.](<https://creatorstoolbox.com/resources/dotmatrix>)[![Remocn](<https://creatorstoolbox.com/images/logos/remocn-38b16a8c699353a8148801bacfddeaf3a5a53f5c3f47d89337bc257a32c08450.svg>)

Remocn

An open-source component registry for building product demo videos with Remotion and AI coding agents.](<https://creatorstoolbox.com/resources/remocn>)[![beUI](<https://www.google.com/s2/favicons?domain=beui.dev&sz=128>)

beUI

Free, open-source animated components for React and Next.js — 108 motion primitives and blocks built with Motion and Tailwind, installable via the shadcn CLI.](<https://creatorstoolbox.com/resources/beui>)[![Bolt Slides](<https://www.google.com/s2/favicons?domain=bolt.new&sz=128>)

Bolt Slides

Open-source building blocks any AI agent (Claude Code, Codex, Bolt) can use to compose presentation decks that are real, shareable web apps.](<https://creatorstoolbox.com/resources/bolt-slides>)[![HeroUI](<https://www.google.com/s2/favicons?domain=heroui.com&sz=128>)

HeroUI

Beautiful, accessible React UI components built on React Aria and Tailwind CSS v4 — the modern alternative to MUI, Chakra UI, and shadcn/ui.](<https://creatorstoolbox.com/resources/heroui>)

---
Canonical source: https://creatorstoolbox.com/resources/audiocn-ui