# Voice Message Bubble

> The Voice Message Bubble component is a sleek, chat-style audio player designed for messaging apps. It features a compact bubble layout with a play/pause button using lucide-react icons, a minimalist black-and-white waveform visualization, and a real-time progress overlay. Users can click on the waveform to seek through the audio, and the component accepts configurable props for bubble color, waveform color, audio source, and duration. Designed with Shadcn UI principles, it ensures a clean, modern, and theme-aware interface that integrates seamlessly into both light and dark layouts. This makes it ideal for voice notes, notifications, or short audio messages in any chat or social application.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@ruixen.ui/components/voice-message-bubble

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/voice-message-bubble?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