Waveform components for shadcn/ui — built on wavesurfer.js.
Drop-in audio & video waveform primitives. Copy, own, customize.
📖 Documentation · ⚡ Quick Start · 🎵 Components
is a shadcn/ui-style collection of waveform components for audio and video interfaces. Components are not installed as a package — you copy the source directly into your project and own it completely.
| Component | Description |
|---|---|
| Wave Player | Full-featured audio player with play/pause, volume, seek bar and optional title |
| Wave Recorder | Capture audio directly in the browser with live waveform visualization |
| Wave Speed | Playback speed control with pitch preservation toggle |
| Wave Timeline | Timeline ruler synced with audio playback, powered by wavesurfer.js TimelinePlugin |
| Wave Video | Video player with synced waveform visualization |
| Wave Zoom | Mouse-wheel zoom on waveform detail via ZoomPlugin |
follows the same philosophy as shadcn/ui — no black-box updates, no version conflicts, full freedom to adapt every component to your design system. If you already use shadcn/ui, slots right in: it shares the same cn utility, Tailwind tokens, and component primitives so everything feels native.
Audio rendering is powered by wavesurfer.js — a battle-tested waveform library with a rich plugin ecosystem.
npx shadcn@latest add @waves-cn/{name}- React 18+
- Tailwind CSS
- shadcn/ui initialized in your project
→ Full installation guide at [https://waves-cn.vercel.app/docs/installation)