Soundcn

Overview

Soundcn is a dedicated sound effects registry designed for modern React and shadcn/ui applications. It offers over 800+ meticulously organized audio clips and Web Audio API triggers, enabling developers to easily add tactile, satisfying auditory feedback to buttons, toggles, dialog confirmations, and toast notifications.

Key Features

• 🔊 800+ Curated Audio Effects: Organized into intuitive categories including clicks, switches, chimes, futuristic lasers, sci-fi hums, notifications, and gaming sounds.
• ⚡ Lightweight Web Audio Engine: Pre-loads and caches sound buffers with zero audio lag, dynamic volume scaling, and stereo panning.
• 📋 shadcn CLI Native Distribution: Install sound hooks and assets directly using the shadcn add command without heavy media bundles.
• 🔇 Accessible & User-Controlled: Built-in support for global mute toggles, user volume preference persistence, and reduced-motion audio checks.

Installation & Quick Start

npx shadcn@latest add https://soundcn.xyz/r/use-sound
# or add specific sound packs
npx shadcn@latest add https://soundcn.xyz/r/click-pack

import React from 'react';
import { Button } from '@/components/ui/button';
import { useSound } from '@/hooks/use-sound';

export function InteractiveButton() {
  const { play } = useSound('/sounds/pop.mp3', { volume: 0.5 });

  return (
    <Button onClick={() => play()}>
      Click for Tactile Audio Feedback
    </Button>
  );
}

Why Choose Soundcn?

• Perfect for: High-craft web applications, productivity tools, interactive games, micro-interaction design, and rich audio-enhanced user experiences.
• Comparison: Provides curated web-optimized audio formats (.mp3 / .webm) and pre-built React hooks instead of unorganized raw audio files.