Do I need audio files?

No. Every sound is generated in the browser with Web Audio, so there is nothing to download or license.

Can people turn the sounds off?

Yes. Sound Toggle switches every sound on the page and remembers the choice; you can also call setSoundsEnabled yourself.

Can I add my own sounds?

Yes. Sounds are plain data, so you can add a definition with your own voices, or tune the volume and pitch of any existing one.

Do these UI sound effects work with shadcn/ui?

Yes. Charcoal UI is a shadcn registry, so components install with the same CLI, use the same CSS variables and sit next to your existing shadcn components.

React UI Sound Effects

UI sound effects for React, synthesised with Web Audio: no audio files.

About these UI sound effects

A small, tasteful layer of sound makes an interface feel physical: a click on press, a soft chime on success, a whoosh as a panel opens. UI Sounds gives you 45 of them, and Sound Toggle lets visitors turn them off.

Every sound is synthesised live with the Web Audio API, so there are no audio files to host, compress or license.

Where they earn their keep

Buttons, toggles and form feedback.
Chat and notification apps.
Games and reward moments.
Audio cues alongside visual feedback.

How they are built

Sounds are short lists of oscillator and filtered-noise voices with fast attacks and soft decays. They play only after a user gesture and honour a remembered on/off preference shared by every sound on the page.

Each one is a single file you copy into your project with the shadcn CLI and own outright. They are written for React 19 and Tailwind CSS 4 with Motion, use only your theme's CSS variables, and work in Next.js, Vite, Remix and Astro.

All 2 UI sound effects

1 is free and MIT licensed, and 1 is part of Charcoal UI Pro, which covers all 393 Pro components, 112 sections and 100 templates for one price. Open any of them to try it live, tune it and copy the code.

UI Sounds (Pro): 45 React UI sounds synthesised live with Web Audio, no audio files
Sound Toggle: A free React sound on/off toggle with animated speaker waves

Install one

npx shadcn@latest add https://charcoalui.com/r/sound-toggle.json

Every page shows the exact command. The CLI adds the file to components/ui along with any dependency it needs, and AI coding agents can do the same through the Charcoal UI MCP server.

Other categories

Browse the rest of the library by what you are building.

React Input Components: 68 components
React Navigation Components: 27 components
React Dialog, Popover and Tooltip Components: 19 components
React Loading, Progress and Toast Components: 23 components
React Card, Accordion and Display Components: 67 components
React AI Chat and Agent Components: 20 components
React Chart and Data Table Components: 24 components
Animated React Icons: 2 components
React Text Animations: 41 components
Animated React Backgrounds: 86 components
React Cursor Effects: 17 components
React Image Effects: 14 components
Interactive React Animations: 27 components
React UI Transitions and Micro-interactions: 23 components

Frequently asked questions

Do I need audio files?: No. Every sound is generated in the browser with Web Audio, so there is nothing to download or license.
Can people turn the sounds off?: Yes. Sound Toggle switches every sound on the page and remembers the choice; you can also call setSoundsEnabled yourself.
Can I add my own sounds?: Yes. Sounds are plain data, so you can add a definition with your own voices, or tune the volume and pitch of any existing one.
Do these UI sound effects work with shadcn/ui?: Yes. Charcoal UI is a shadcn registry, so components install with the same CLI, use the same CSS variables and sit next to your existing shadcn components.