Early accessFull site coming soon. Pro is $49.99 a year. See pricing ›

Nexus UI

Sounds

24 interface sounds you can hear, made entirely in code with the Web Audio API. Tap an orb to play it, then copy the one line that does the same in your app. Free, and nothing to download.

playSound("pop")24 sounds, synthesised in the browser. No audio files.

Add it to your app

One command puts lib/ui-sounds.ts in your project. Then any click, toggle or toast can make a sound.

$ npx shadcn@latest add @nexus-labs/ui-sounds
like-button.tsx
"use client";
 
import { playSound } from "@/lib/ui-sounds";
 
export function LikeButton() {
  return (
    <button onClick={() => playSound("pop")}>
      Like
    </button>
  );
}
patterns.tsx
import { playSound, setSoundVolume, setSoundsMuted } from "@/lib/ui-sounds";
 
// A toggle: one sound for each direction
onCheckedChange={(on) => playSound(on ? "on" : "off")}
 
// Async work: start, then success or failure
playSound("charge");
const ok = await save();
playSound(ok ? "success" : "error");
 
// A notification arriving, quieter than the rest
playSound("chime", 0.6);
 
// Respect a "Sounds" preference in your settings
setSoundsMuted(!settings.sounds);
setSoundVolume(0.7);

Questions

Do the sounds need audio files?

No. All 24 sounds are synthesised in the browser with the Web Audio API from oscillators, filtered noise and volume envelopes, so the library is one TypeScript file of about 8 KB and nothing is downloaded.

Why does nothing play until I click?

Browsers only allow audio after a user gesture. Call playSound from a click, key press or pointer event; the audio context starts on the first one.

Does it work with the Next.js App Router?

Yes. Import playSound inside a client component ("use client"). On the server the functions do nothing, so importing them is safe anywhere.

How do I let people turn sounds off?

Call setSoundsMuted(true) when someone switches sounds off, and setSoundVolume(0 to 1) for a volume setting. Interface sounds should be optional and quiet; the defaults are already soft.

Is it free?

Yes. The sounds library is free to use in personal and commercial projects, installed with the shadcn CLI or copied from this page.

Give them something to press.

The sounds pair with the components: a pop for a like, a latch for a toggle, a chime for a toast.

Browse componentsSee blocks