#What is SoundCN?

SoundCN is a free, open-source collection of meticulously curated UI sound effects designed specifically for React developers building with shadcn/ui who want to add delightful, professional audio feedback without hunting for assets or dealing with external CDNs. It's perfect for SaaS apps, dashboards, games, interactive tools, onboarding flows, notifications, or any project where subtle sounds enhance UX—think button clicks, toast arrivals, modal opens, progress ticks, error buzzes, or achievement unlocks. Each sound ships as a lightweight, self-contained TypeScript file with embedded base64 audio, installable instantly via the shadcn CLI, ensuring full code ownership, no runtime deps beyond Web Audio API, and perfect alignment with shadcn/ui's copy-paste philosophy. Core value: bring polished audio polish to your UI in seconds while keeping bundle size minimal and everything local.

#Features ⚡

• One-Command Installation: Run npx shadcn@latest add @soundcn/alchemy-set-loop (or any sound name) to add it directly to your components/ui or lib folder.

• Self-Contained Modules: Every sound is a single TS file with inline base64 data URI—no separate assets or imports needed.

• useSound Hook Included: Simple, powerful hook for playback control, volume, looping, and event handling using Web Audio API.

• Live Preview & Browse: Interactive sound gallery on the site with play buttons, categories, and search for quick discovery.

• Broad Sound Categories: Clicks, notifications, hovers, transitions, successes, errors, warnings, game effects, voice prompts, and curated packs (e.g., Alchemy set).

• Zero External Dependencies: Relies only on browser-native Web Audio—no Howler.js, no sound libraries, fully local after install.

• Open Source & Free: MIT licensed, community-contributable, no paywalls or limits.

#Pros ✅

• Perfect shadcn/ui citizen—CLI install feels native and keeps your codebase clean.

• Massive library (700+) covers almost every UI interaction you can think of.

• Embedded base64 means no asset loading issues, offline support, and tiny impact on build size.

• useSound hook is production-ready and flexible for advanced use cases.

• Completely free with no upsells—ideal for indie devs and open-source projects.

#Cons ⚠️

• Audio files (even base64) add a small amount to bundle size if you install many sounds (though individual files are tiny).

• Relies on browser Web Audio API support—very broad but edge cases on old browsers may vary.

• No visual waveform/player components included—just raw audio playback

• Still growing; some niche or custom sounds may require manual addition or community contributions.

#Included Components - Templates

• useSound Hook: Core utility for playing, stopping, looping, and controlling any installed sound.

• Individual Sound Modules: e.g., success.tsx, error-buzz.tsx, button-click.tsx, notification-pop.tsx, hover-light.tsx — each a ready-to-import sound export.

• Example Usage Snippets: Docs show simple playback like const { play } = useSound('success'); play();.

• Curated Packs: Grouped sets like "Alchemy" for consistent tonal libraries (loops, one-shots, etc.).

#Pricing 💸

• 100% free and open-source under MIT license—no tiers, subscriptions, or paid sounds.

• All 700+ effects, the registry, CLI integration, and hook are fully accessible at no cost.

• Optional: Sponsor the creator via GitHub if you find it valuable.

#Integrations 🧰

• shadcn/ui: Official CLI compatibility for seamless one-command adds.

• React / Next.js: Primary target stack with hooks and components.

• Tailwind CSS: Works alongside shadcn/ui styling—no conflicts.

• Web Audio API: Native browser playback—no extra audio libraries required.

• TypeScript: Fully typed modules and hook for safe usage.

• GitHub: Source at github.com/kapishdima/soundcn for contributions or self-hosting.