logo

Waveform components for shadcn/ui — built on wavesurfer.js.
Drop-in audio & video waveform primitives. Copy, own, customize.



· ·

Overview

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.

ComponentDescription
Wave PlayerFull-featured audio player with play/pause, volume, seek bar and optional title
Wave RecorderCapture audio directly in the browser with live waveform visualization
Wave SpeedPlayback speed control with pitch preservation toggle
Wave TimelineTimeline ruler synced with audio playback, powered by wavesurfer.js TimelinePlugin
Wave VideoVideo player with synced waveform visualization
Wave ZoomMouse-wheel zoom on waveform detail via ZoomPlugin

Philosophy

follows the same philosophy as — 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 — a battle-tested waveform library with a rich plugin ecosystem.

Quick Start

bash
npx shadcn@latest add @waves-cn/{name}

Prerequisites

  • React 18+
  • Tailwind CSS
  • initialized in your project

→ Full installation guide at [

Contributors

  • Ziane Badreddine —
  • Mouad Sadik —