---
name: "@waves-cn"
slug: "waves-cn"
description: "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."
category: "Niche/single-purpose"
tags: ["accessibility", "audio", "backgrounds", "buttons", "cards", "charts", "components", "design-system", "forms", "hooks", "media"]
framework: "react"
license: "MIT"
author: "Ziane-Badreddine"
website: "https://waves-cn.vercel.app"
github: "https://github.com/Ziane-Badreddine/waves-cn"
registry: "https://waves-cn.vercel.app/r/registry.json"
pro: false
pro_url: null
github_stars: 17
component_count: 7
generated_at: "2026-07-28T08:00:50.948Z"
---

# @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.

## Links

- Website: https://waves-cn.vercel.app
- GitHub: https://github.com/Ziane-Badreddine/waves-cn
- Registry JSON: https://waves-cn.vercel.app/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/waves-cn
- This file: https://sh4dcn.vercel.app/md/waves-cn.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://waves-cn.vercel.app/r/registry.json
pnpm dlx shadcn@latest add https://waves-cn.vercel.app/r/registry.json
bunx shadcn@latest add https://waves-cn.vercel.app/r/registry.json
# clone the source repo
git clone https://github.com/Ziane-Badreddine/waves-cn.git
# fetch the raw registry index
curl -s https://waves-cn.vercel.app/r/registry.json
```

## Components (7)

| name | type | description | install |
| --- | --- | --- | --- |
| wave-cn | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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` |

## For AI agents

```text
You are adding components from @waves-cn to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/waves-cn.md) for the component list.
2. Fetch the machine-readable index: https://waves-cn.vercel.app/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: waves-cn).
```