@waves-cn

shadcn/ui-style registry of six audio and video waveform components built on wavesurfer.js and Tailwind CSS, targeting React 18+. Components are Wave Player (full-featured audio player with seek, volume, title), Wave Recorder (live in-browser recording with waveform), Wave Speed (variable playback with pitch toggle), Wave Timeline (timeline ruler), Wave Video (video player with synced waveform), and Wave Zoom (mouse-wheel zoom). Code is copied into your project — no runtime package. Free and MIT-licensed. Use for: apps requiring embedded audio players, podcast interfaces, or voice memo recorders that need waveform visualization matching your existing shadcn design system.

7 components react shadcn-cli MIT

website ↗ github ↗ registry ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://waves-cn.vercel.app/r/registry.json

pnpm pnpm dlx shadcn@latest add https://waves-cn.vercel.app/r/registry.json

bun bunx shadcn@latest add https://waves-cn.vercel.app/r/registry.json

fetch registry curl -s https://waves-cn.vercel.app/r/registry.json

Components

7 total

Wave Core lib

Core hook, player and shared defaults powering all waves-cn components. Built on wavesurfer.js.

npx shadcn@latest add https://waves-cn.vercel.app/r/wave-cn.json

Wave Player component

Full-featured wave player with play/pause, volume control, seek bar and optional title.

npx shadcn@latest add https://waves-cn.vercel.app/r/wave-player.json

Wave Recorder component

Voice message recorder with live waveform, pause/resume, discard and auto-stop.

npx shadcn@latest add https://waves-cn.vercel.app/r/wave-recorder.json

Wave Speed component

wave player with continuous playback speed control and preserve-pitch toggle.

npx shadcn@latest add https://waves-cn.vercel.app/r/wave-speed.json

Wave Zoom component

wave player with mouse-wheel zoom via wavesurfer.js ZoomPlugin.

npx shadcn@latest add https://waves-cn.vercel.app/r/wave-zoom.json

Wave Video component

Waveform player synced to a video element via the wavesurfer.js media prop.

npx shadcn@latest add https://waves-cn.vercel.app/r/wave-video.json

Wave Timeline component

wave player with timeline ruler, zoom slider and volume control powered by wavesurfer.js TimelinePlugin.

npx shadcn@latest add https://waves-cn.vercel.app/r/wave-timeline.json