Skip to main content

UI sound effects for modern web apps

Browse, preview, and install 700+ curated sound effects with a single command. Zero dependencies, tree-shakeable, and offline-ready.

Get StartedAPI Reference
700+ Sounds
Curated UI effects
Zero Dependencies
Web Audio API only
One Command Install
Via shadcn CLI

Get started in seconds

Install sounds directly into your codebase with the shadcn CLI. No npm packages, no external files, no CORS issues.

1

Browse and find a sound

Visit soundcn.xyz to browse the full catalog of 700+ sounds. Preview any sound by clicking on it.
Sounds are organized by category: clicks, notifications, switches, game sounds, and more.
2

Install with one command

Copy the install command and run it in your project directory:
npx shadcn add https://soundcn.xyz/r/click-soft.json
This installs the sound module, the useSound hook, and type definitions directly into your codebase.
3

Import and play

Use the sound in your React components:
import { useSound } from "@/hooks/use-sound";
import { clickSoftSound } from "@/sounds/click-soft";

function Button() {
  const [play] = useSound(clickSoftSound, { volume: 0.5 });
  
  return (
    <button onClick={() => play()}>
      Click me
    </button>
  );
}
The button will play the click-soft sound effect when clicked. The sound plays instantly with no loading delay since it’s embedded as a base64 data URI.

Explore by topic

Learn how to integrate sound effects into your web application

Using useSound

Master the useSound React hook with volume control, playback rate adjustment, and interrupt handling

Sound Engine

Use the framework-agnostic sound engine for vanilla JavaScript projects

Browse Sounds

Discover how to find the perfect sound from 700+ curated effects

Collections

Explore themed sound packs including the World of Warcraft collection

Real-world examples

See how to implement sound effects in common UI patterns

Button Feedback

Add click sounds to buttons and interactive elements

View example

Notification Sounds

Play sounds for alerts, toasts, and system notifications

View example

Game UI

Build game interfaces with 8-bit sounds and retro effects

View example

Ready to add sound to your app?

Start with the quickstart guide and have sounds playing in your app within minutes.

Get Started

Build docs developers (and LLMs) love

Get started for freeTalk to us