# Sound

A React component in [Beamline](https://beamline.io/)'s [Motion & effects](https://beamline.io/components/effects) category. Live demo: https://beamline.io/components/sound

Interface sounds named by interaction class (tap, select, toggle, open/close, tick, success, error) through one provider; off by default.

## Use it for

- Products that want tactile feedback, as a user setting.

## Not for

- Default-on sound, or sound as the only feedback.

## Anatomy

- SoundProvider (enabled)
- useSound().play(name)

## Variants

- **name**: tap, select, destructive, toggleOn, toggleOff, open, close, tick, success, error

## States

- off (default)
- on

## Keyboard

- n/a

## Motion

n/a

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `enabled` | `boolean` | — |  |
| `children` (required) | `ReactNode` | — |  |

## Dependencies

`@web-kits/audio`

## Import

```tsx
import { SoundProvider } from "@/components/sound/sound";
```

## Get it

Sound is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Motion & effects

- [Glow](https://beamline.io/components/glow): Ambient light around one element that says something is happening: an aurora under a working composer, or a ring of light round a live card.
- [Halftone Dots](https://beamline.io/components/halftone-dots): A picture rebuilt as a field of dots whose size follows brightness; a new picture morphs the dots, a click ripples through, the pointer pushes dots aside.
- [Light band](https://beamline.io/components/light-band): A slow band of split light in the dark behind a section, blue at one end and amber at the other with a bright core: Prism's light at a chosen place, a…
- [Liquid gooey](https://beamline.io/components/liquid-gooey): Liquid surfaces that merge like goo when they touch — split plus-menus, gooey switches, file chips.