soundcn

soundcn

Open-source collection of UI sound effects, installable via shadcn CLI.

Problem

Adding sound to web interfaces is tedious. You either hunt for free samples, deal with licensing, wire up audio loading, or pull in heavy libraries — all for a simple button click sound.

What is soundcn

A curated registry of 700+ short sound effects (clicks, notifications, transitions, game sounds) that you can add to any React project with a single command: …

npx shadcn add @soundcn/click-soft

Each sound is a self-contained TypeScript module with an inline base64 data URI — no external files, no runtime fetching, no CORS issues. Sounds are installed directly into your codebase, not as a dependency.

Includes a useSound hook for playback via the Web Audio API. Zero dependencies.

How it works

• Browse sounds at soundcn.xyz
• Install any sound — it copies the .ts file and the useSound hook into your project
• Import and play:

import { useSound } from "@/hooks/use-sound";
import { clickSoftSound } from "@/sounds/click-soft";

const [play] = useSound(clickSoftSound);

Thanks all my sponsors

Shadcnblocks.com

2000+ Shadcn UI Blocks

Stats

License

Most sounds are sourced from CC0-licensed collections (primarily Kenney).

The World of Warcraft collection (110 sounds) is an exception — those assets are property of Blizzard Entertainment, Inc. and are not CC0 or freely licensed. soundcn is not affiliated with or endorsed by Blizzard Entertainment, Inc. World of Warcraft® is a registered trademark of Blizzard Entertainment, Inc. These sounds are included for non-commercial, educational, and reference purposes only.