sensory-ui
Sound-enabled shadcn/ui components.
Is this your product? Claim it to edit the listing, post updates and answer questions. Prove it with an email address at the product's domain (the listing becomes Claimed), or put the LotsDirectory badge on your website (the listing becomes Verified, and its link to your website is followed while the badge is live).
Description
Sound-enabled shadcn/ui components. Add meaningful audio feedback with a single prop - no audio files required.
About sensory-ui
What is sensory-ui?
sensory-ui is a set of sound-enabled components for React and Next.js. Sounds are generated in the browser with the Web Audio API. There are no audio files.
What sensory-ui does
The components are drop-in replacements for shadcn/ui. Add a sound prop and the control plays a cue. 24 components, 17 sound cues, and about 28kb gzipped. The documentation has 17 sound roles, 9 sound packs, 24 components, and 5 guides. Packs include glass and arcade. Every cue maps to an interaction, state, or moment. Disable sound globally, by category, or per interaction. It respects reduced motion. Every cue has a visual counterpart. Install is through the shadcn CLI, and the license is MIT, open source forever.
Who sensory-ui is for
sensory-ui is for React and Next.js interfaces that want sound on buttons, dialogs, and toggles. Satyam Vyas is the creator.
How sensory-ui works
Install through the shadcn CLI with npx shadcn add. Add a sound prop. Sounds are synthesized in the browser with the Web Audio API. There are no MP3s and no WAVs. Nothing to download, nothing to cache. Sounds render when the interaction happens. Configuration is packs, volume, categories, and overrides. prefers-reduced-motion is baked in from the start.
Key features
- Drop-in shadcn/ui components with a sound prop, including button, checkbox, switch, slider, tabs, toast, dialog, drawer, and accordion.
- Real-time synthesis with the Web Audio API. No audio files and no latency.
- 17 sound cues, and 17 sound roles across 5 categories.
- 9 sound packs, including glass and arcade, playing the same roles in a different voice.
- Interaction cues at 8-50ms, and hero cues at 350-1900ms.
- Accessible by default, with reduced motion, disable globally, and a visual counterpart for every cue.
- MIT license and open source forever. Satyam Vyas is the creator of sensory-ui.
Facts from sensory-ui.com, checked 14 October 2026
- 24 components, 17 sound cues, and about 28kb gzipped. The documentation has 17 sound roles, 9 sound packs, 24 components, and 5 guides.
- Sound categories on the page include interaction, overlay, navigation, notification, and hero.
- MIT License, and open source forever.
Written from sensory-ui's own website (Homepage, Docs). The maker can claim this listing to edit it.
Categories
Frequently asked questions
What is sensory-ui?
sensory-ui is sound-enabled components for React and Next.js. Every cue maps to an interaction type. Sounds are synthesized live with the Web Audio API, and there are zero audio files.
How does the sound get generated?
Every sound is generated in the browser using the Web Audio API. There are no MP3s and no WAVs. Sounds are generated locally. Nothing to download, nothing to cache, and no latency.
How is it installed?
Install through the shadcn CLI. The docs say installation is via the shadcn CLI, then configuration of packs, volume, categories, and overrides.
Can sound be turned off?
Yes. Disable sound globally, by category, or per interaction. It respects reduced motion, and every cue has a visual counterpart.
Is sensory-ui open source?
Yes. MIT License and open source forever. Sponsor sensory-ui is free and open-source, forever.
Who created sensory-ui?
Satyam Vyas is the creator of sensory-ui.