Skip to main content

​
What is Soundcn?

Soundcn is an open-source registry of curated UI sound effects designed to make adding audio feedback to web interfaces effortless. With over 700 high-quality sound effects—including clicks, notifications, transitions, and game sounds—you can enhance your React applications with just a single command.
All sounds are sourced primarily from CC0-licensed collections (mainly Kenney), ensuring you can use them freely in your projects.

​
The Problem

Adding sound to web interfaces is traditionally tedious:
  • Hunt for free audio samples across multiple sources
  • Deal with licensing uncertainties
  • Wire up audio loading and playback logic
  • Pull in heavy audio libraries for simple button clicks
  • Handle CORS issues with external audio files
Soundcn solves all of these problems with a streamlined, developer-friendly approach.

​
Key Features

1

700+ Curated Sound Effects

Browse a comprehensive collection of UI sounds including clicks, notifications, transitions, game sounds, and more. Each sound is carefully selected and categorized for easy discovery.
2

Single Command Installation

Install any sound with one command using the shadcn CLI. Sounds are copied directly into your codebase—not added as dependencies.
npx shadcn add https://soundcn.xyz/r/click-soft.json
3

Zero Dependencies

Uses the native Web Audio API for playback. No external libraries required, keeping your bundle size minimal.
4

Base64 Data URIs

Each sound is a self-contained TypeScript module with an inline base64 data URI. No external files, no runtime fetching, no CORS issues.
5

Tree-Shakeable TypeScript

Import only the sounds you use. Unused sounds won’t be included in your production bundle.
6

React Hook & Framework-Agnostic API

Use the useSound hook in React components, or the playSound function in any JavaScript environment.

​
How It Works

Soundcn integrates seamlessly with the shadcn ecosystem:
  1. Browse - Visit soundcn.xyz to explore and preview sounds
  2. Install - Run the shadcn CLI command to copy the sound and hook into your project
  3. Import & Play - Use the provided useSound hook or playSound function
import { useSound } from "@/hooks/use-sound";
import { clickSoftSound } from "@/sounds/click-soft";

function MyButton() {
  const [play] = useSound(clickSoftSound);
  
  return (
    <button onClick={play}>
      Click me
    </button>
  );
}

​
Sound Structure

Each sound is a TypeScript module that exports a SoundAsset object: 
export interface SoundAsset {
  name: string;              // Unique identifier
  dataUri: string;           // Base64-encoded audio data
  duration: number;          // Duration in seconds
  format: "mp3" | "wav" | "ogg";  // Audio format
  license: "CC0" | "OGA-BY" | "MIT"; // License type
  author: string;            // Original creator
}
Example sound file: 
import type { SoundAsset } from "@/lib/sound-types";

export const clickSoftSound: SoundAsset = {
  name: "click-soft",
  dataUri: "data:audio/mpeg;base64,SUQzBAAAAAAAIlRTU0...",
  duration: 0.007,
  format: "mp3",
  license: "CC0",
  author: "Kenney",
};
The base64 data URI contains the complete audio file, making each sound completely self-contained and portable.

​
Why Soundcn?

  • No Build Configuration - Works out of the box with any React setup
  • Type-Safe - Full TypeScript support with complete type definitions
  • Flexible - Use in React components, vanilla JavaScript, or any framework
  • Performant - Automatic audio buffer caching and reuse
  • Developer Experience - Instant preview on the website, one-command installation
  • Open Source - MIT licensed, hosted on GitHub

​
License Information

Most sounds in the collection are CC0 licensed, primarily from Kenney’s sound libraries. This means you can use them freely in commercial and personal projects without attribution (though attribution is always appreciated).
The World of Warcraft collection (110 sounds) is an exception. These assets are property of Blizzard Entertainment, Inc. and are included for non-commercial, educational, and reference purposes only.

​
Next Steps

Ready to add sound to your application?

Build docs developers (and LLMs) love

Get started for freeTalk to us