UI sound effects for React and the web

Open-source UI sound effects for React, Next.js and any web app: 43 interaction sounds in 4 themes, synthesized with Web Audio and installed as code you own.

audx is an open-source library of UI sound effects. Pick a theme, add the sounds you need, and call them like functions.

import { click, success, error } from "@/sounds";

click();

There are no audio files. Every sound is a few hundred bytes of JSON that the Web Audio API synthesizes at play time. The CLI writes each sound into your project as a plain TypeScript module, so you own the code and can change it.

Why audx

Semantic sounds

43 sounds named for what they mean, like click, toggle, success, error and notify, so you pick a sound by intent, not by waveform.

Swappable themes

Every built-in theme ships the same 43 sounds. Run audx theme playful to re-skin your whole app without touching code.

Code you own

Sounds land in src/sounds/ as readable source. Commit them, review them and edit them like any other module.

Tiny and SSR-safe

No audio assets to download. Playing a sound during server rendering, or while muted, does nothing.

How it works

1. Initialize

   npx @litlab/audx init creates audx.json, installs @litlab/audx and lets you pick a starter set of sounds.

2. Add sounds

   npx @litlab/audx add click success writes one module per sound, plus an index.ts that re-exports them.

3. Play them

   Import a sound and call it, or pass it to useSound in React to respect a mute setting and the user’s reduced-motion preference.

Next steps

Quickstart

Add your first sounds in under a minute.

Use with React

SoundProvider, useSound and a sound on/off setting.

Use with Next.js

App Router and Pages Router setup.

Vue, Svelte and vanilla JS

Sounds are plain functions that work anywhere.

Themes

Compare the four built-in themes and switch between them.

CLI reference

Every command and flag.

Hear every sound before you install it at audx.site, or try them in real components at audx.site/showcase.