sensory-ui is a set of sound-enabled shadcn/ui components for React and Next.js. Every cue maps to an interaction type across 17 sound roles and 5 categories, synthesized live with the Web Audio API. Zero audio files.

How do I add sound to a shadcn/ui component?

Install a component with the shadcn CLI (npx shadcn@latest add SatyamVyas04/sensory-ui/sensory-ui-button), wrap your app in SensoryUIProvider, then pass a sound prop such as sound="interaction.tap". All other props behave exactly like shadcn/ui.

Does sensory-ui need audio files?

No. All sounds are synthesized programmatically with the Web Audio API across 9 sound packs (soft, aero, arcade, organic, glass, industrial, minimal, retro, crisp). Nothing is served from public/ and there are no base64 blobs.

Is sensory-ui accessible?

Yes. Sound is opt-in and accessibility-first: per-category kill-switches, volume control, and prefers-reduced-motion support are built in. See the accessibility guide at sensory-ui.com/docs/guides/accessibility.

sensory-ui

made for the web

Your website speaks. Give it a voice.

Sound-enabled components for React and Next.js.

$ npx shadcn@latest add 
SatyamVyas04/sensory-ui/sensory-ui

components: 24
sound cues: 17
sound packs: 9
gzipped: ~28kb

Get Started Explore Components

Hear your components.

Drop-in replacements for shadcn/ui. Add a sound prop. Hear the difference.

Sound Pack

Button

Click to trigger each activation

Slider

Subtle tick on every value change

Volume40

Command

Search and select from a command palette

Tabs

Switch tabs to hear navigation cues

Preview - switch tabs to trigger sound.

Notifications

Toast notifications with sound

Carousel

Prev/next trigger navigation cues

Step 1Install the component

Step 2Add the sound prop

Step 3Ship with confidence

Navigation Controls

Directional movement & pagination sounds

Direction

Pagination

Hero Moments

Milestone and task completion sounds

Dialog

Open & close to trigger system sounds

Overlay Surfaces

Open & close overlays to hear the sound pair

Drawer

Dropdown

Select

Expand / Collapse

Accordion & collapsible expand/collapse sounds

Accordion

Collapsible

Sounds generated in real time via Web Audio API. No files. No latency.

Philosophy

Sound with intention.

Sound should communicate, not compete. These principles keep sensory-ui from becoming noise.

Informative, not decorative

Sound should tell the user something. Every cue maps to an interaction, state, or moment. If it doesn't communicate, it doesn't play.

Small actions, small sounds

A checkbox gets a tick. Navigation gets a sweep. A milestone gets a chime. Sound weight scales with the interaction.

Accessible by default

Sound never gets in the way. Respects reduced motion. Disable globally, by category, or per interaction. Every cue has a visual counterpart.

Reassuring, never punishing

Errors shouldn't punish. Success shouldn't scream. Every sound is designed to reinforce the interaction and feel good.

How it works

No audio files. Just sound.

Every sound is generated in the browser using the Web Audio API. No downloads. No assets. No latency.

audio files

No MP3s. No WAVs. Every sound is synthesized in the browser.

network requests

Sounds are generated locally. Nothing to download, nothing to cache.

latency

No waiting. Sounds render the instant you interact.

Why sound?

The forgotten dimension of UI.

"Your ears are faster than your eyes. The auditory cortex processes sound in about 25ms, while visual processing takes nearly ten times longer. A button that clicks feels faster than one that doesn't, even when the visual feedback is identical."
– Raphael Salaja, Sounds on the Web

"Sound should create a sense of comfort and security – only calling for action when needed. Informative, honest, and reassuring."
– Material Design, About Sound

We design interfaces for the eyes. But interaction happens through more than vision. A subtle click can confirm an action. A sweep can signal movement. A chime can mark completion.

sensory-ui adds this dimension - zero audio files, zero side effects, procedural synthesis powered by the Web Audio API.

17 sound cues across 5 categories

interaction

8–50msDirect user actions

overlay

120–270msSurface state changes

navigation

40–250msSpatial movement

notification

200–450msSystem messages

hero

350–1900msCelebratory moments

Get started

Give your UI a voice.

Install through the shadcn CLI. Add a prop. Ship.

View on GitHub Read the docs

MIT License · Open source forever