Give your React and Next.js apps a voice with semantic audio.
Add meaningful audio feedback to your React and Next.js applications. What it does: Sensory UI provides a semantic, opt-in sound layer for React and Next.js applications, specifically built for shadcn/ui. It allows you to add instant, meaningful audio feedback to UI interactions across 24 components, utilizing 17 distinct sound roles. This system generates sounds in real-time via the Web Audio API, eliminating the need for audio files and ensuring zero latency. Key features: • Semantic Sound Roles — 17 predefined roles (e.g., Button Click, Toggle, Slider Tick, Notification Toast) that map to common UI interactions, ensuring consistent and intuitive audio feedback. • shadcn/ui Integration — Seamlessly integrates with shadcn/ui components using a single `sound` prop, making implementation straightforward. • Real-time Audio Generation — Utilizes the Web Audio API to create sounds on the fly, avoiding the overhead and latency associated with pre-recorded audio files. • Lightweight — A gzipped size of approximately 26kb, ensuring minimal impact on your application's performance. • Customizable Sound Packs — Comes with 9 sound packs, offering variety in audio style from crisp hi-fi precision to subtle feedback. Use cases: • Enhance user experience in e-commerce sites with distinct sounds for adding items to a cart or completing a purchase. • Provide clear audio cues for form submissions, toggles, and navigation in complex web applications. • Create more accessible interfaces by offering auditory feedback for users with visual impairments. • Build engaging interactive experiences in games or educational platforms. What makes it different: Sensory UI focuses on intentional, semantic audio design, treating UI sound as a craft rather than a mere gimmick. Its real-time generation and deep integration with shadcn/ui offer a unique, performant, and developer-friendly approach to adding audio feedback to modern web applications.
