Sound
A React component in Beamline's Motion & effects category.
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
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 · Connect your agent
More in Motion & effects
- 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: 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: 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: Liquid surfaces that merge like goo when they touch — split plus-menus, gooey switches, file chips.