Waves/cn
We needed a waves component for shadcn/ui. We couldn't find one. So we built it — introducing @waves/cn, a collection of reusable waveform components for React.
🚀 From Searching for It to Creating It
While working on a project, we needed a waves component for shadcn/ui.
We searched for a shadcn package…
But we didn't find one.
So instead of waiting for it to exist — we built it. 🚀
Introducing @waves/cn
A collection of reusable waveform and wave player components for React applications, designed to feel native inside shadcn/ui projects.
Simple. Customizable. Developer-owned.
Built on top of WaveSurfer.js, providing powerful and flexible waveform visualization seamlessly integrated into the shadcn ecosystem.
If you're already using React with shadcn/ui, this will fit naturally into your stack.
Get Started
We won't go deep into the technical details here — visit the documentation to learn more and see how to use it:
Contribute & Support
If you like it, give it a ⭐ star on GitHub.
Want to contribute? Open a PR and build with us — we welcome improvements, ideas, and feedback.
Proud of the teamwork with Ziane Badr Eddine to bring this idea to life.