Is @usespaceui/sounds free?

Yes. It is free and open source under the MIT license, for commercial or personal projects, with no attribution required.

How are the Sounds generated?

Each sound is generated using the Web Audio API. No external audio files like .mp3 or .wav are loaded. Nothing is stored and no network request is made.

Does it support spatial audio?

Yes. It features 3D spatial panning and tailored acoustic curves based on where the element is on the screen.

Does it make network requests?

No. Sounds are generated locally. Nothing is uploaded, sent to a remote service, or stored.

Can I use it in Vue, Solid, Svelte or vanilla JS?

Yes. Although the React component is popular, you can use HTML data-attributes in any framework.

Space UI

Sounds Matrix

A comprehensive overview of every sound trigger and its parameters.

All 23 procedural sounds

Detailed capability breakdown for every trigger in @usespaceui/sounds.

Sound IDTypeParametersValues AcceptedDescription

tapCore

None

Default generic click interaction.

pressCore

None

Heavy interaction, usually for mousedown/pointerdown.

releaseCore

None

Light release, usually for mouseup/pointerup.

tickCore

None

Subtle sound for hover or passing over elements.

pageCore

None

Navigation transition or page turning.

copyAction

None

Data copied to clipboard.

pasteAction

None

Data pasted from clipboard.

removeAction

None

Item deleted or removed.

confirmAction

None

Action confirmed or saved successfully.

denyAction

None

Action denied or error occurred.

openOverlay

None

Modal, dialog, or dropdown opened.

closeOverlay

None

Modal, dialog, or dropdown closed.

loadingStatus

None

Process started or loading state entered.

readyStatus

None

Process completed or ready state.

chimeTone

None

Pleasant notification chime.

sparkleTone

None

Magical or rewarding interaction.

dropletTone

None

Organic, watery UI sound.

bloomTone

None

Expanding or revealing interaction.

whisperTone

None

Very quiet, breathy interaction.

nudgeDirectional

updown

Used for increments or up/down interactions.

toggleDirectional

onoff

Used for switches or toggle interactions.

slideDirectional

inout

Used for drawers or side panels.

turnDirectional

forwardback

Used for pagination or rotational steps.