# Visualizer Button

> This Visualizer Button is a compact, interactive UI component built strictly with shadcn UI. It acts as a small audio visualizer embedded within a button, making it perfect for notifications, background music, or voice notes. When clicked, it plays the given audio source and animates five vertical bars to simulate audio levels in real time. The bars’ heights dynamically change to reflect the audio playback, providing instant visual feedback. The button is fully customizable with props for width, height, and class names, and it automatically adapts to light or dark themes using appropriate colors. Its minimal, functional design ensures it can seamlessly fit into any modern interface while adding a playful, engaging element to the user experience.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- Live preview: https://21st.dev/@ruixen.ui/components/visualizer-button

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/visualizer-button?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt