DEV Community

Mouad Sadik
Mouad Sadik

Posted on

waves/cn our own shadcn package

๐Ÿš€ ๐—™๐—ฟ๐—ผ๐—บ ๐—ฆ๐—ฒ๐—ฎ๐—ฟ๐—ฐ๐—ต๐—ถ๐—ป๐—ด ๐—ณ๐—ผ๐—ฟ ๐—œ๐˜ ๐˜๐—ผ ๐—–๐—ฟ๐—ฒ๐—ฎ๐˜๐—ถ๐—ป๐—ด ๐—œ๐˜
While working on a project, we needed a ๐’˜๐’‚๐’—๐’†๐’” ๐’„๐’๐’Ž๐’‘๐’๐’๐’†๐’๐’• ๐’‡๐’๐’“ ๐’”๐’‰๐’‚๐’…๐’„๐’/๐’–๐’Š.

We searched for a shadcn packageโ€ฆ
But we didnโ€™t find one.
So instead of waiting for it to exist โ€” ๐˜„๐—ฒ ๐—ฏ๐˜‚๐—ถ๐—น๐˜ ๐—ถ๐˜. ๐Ÿš€

Introducing @๐ฐ๐š๐ฏ๐ž๐ฌ/๐œ๐ง
A collection of reusable waveform and wave player components for ๐‘๐ž๐š๐œ๐ญ applications designed to feel native inside shadcn/ui projects.

๐‘บ๐’Š๐’Ž๐’‘๐’๐’†.
๐‘ช๐’–๐’”๐’•๐’๐’Ž๐’Š๐’›๐’‚๐’ƒ๐’๐’†.
๐‘ซ๐’†๐’—๐’†๐’๐’๐’‘๐’†๐’“-๐’๐’˜๐’๐’†๐’….

Built on top of WaveSurfer.js, providing powerful and flexible waveform visualization seamlessly integrated into the shadcn ecosystem.

If you're already using ๐‘๐ž๐š๐œ๐ญ with shadcn/ui, this will fit naturally into your stack.

We wonโ€™t go deep into the technical details here โ€”
๐Ÿ‘‰ Visit the documentation to learn more and see how to use it:
https://waves-cn.vercel.app

If you like it, give it a ๐’”๐’•๐’‚๐’“ on GitHub.
Want to contribute? Open a ๐‘ท๐‘น and build with us โ€” we welcome improvements, ideas, and feedback.
On Github repo : https://github.com/Ziane-Badreddine/wavescn

Top comments (1)

Collapse
 
mouad_sadik_ab26b70d42c84 profile image
Mouad Sadik

It's very impressive