Open-source collection of UI sound effects, installable via shadcn CLI.
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.
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-softEach 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.
- Browse sounds at soundcn.xyz
- Install any sound — it copies the
.tsfile and theuseSoundhook into your project - Import and play:
import { useSound } from "@/hooks/use-sound";
import { clickSoftSound } from "@/sounds/click-soft";
const [play] = useSound(clickSoftSound);| Shadcnblocks.com 2000+ Shadcn UI Blocks |
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.