Skip to content
Voidable

Svelte

Svelte handles custom elements natively in templates. The @voidable/ui-svelte package provides a theme readable store.

Install

Section titled “Install”
Terminal window
npm install @voidable/ui @voidable/theme @voidable/ui-svelte

Usage

Section titled “Usage”

Use <void-*> elements directly in Svelte templates. Because Svelte 5’s onevent syntax doesn’t support hyphens in event names, bind a reference and wire up listeners in a $effect:

<script>
  import '@voidable/ui';


  let name = $state('');
  let input;
  let button;


  $effect(() => {
    const onchange = (e) => { name = e.detail.value; };
    const onclick = () => console.log(name);
    input.addEventListener('void-change', onchange);
    button.addEventListener('void-click', onclick);
    return () => {
      input.removeEventListener('void-change', onchange);
      button.removeEventListener('void-click', onclick);
    };
  });
</script>


<void-input bind:this={input} placeholder="Your name" />
<void-button bind:this={button} variant="filled">Submit</void-button>

Theme store

Section titled “Theme store”

Track the active theme with a readable Svelte store:

<script>
  import { theme } from '@voidable/ui-svelte';
</script>


<span>Current theme: {$theme}</span>

The store observes the data-theme attribute on <html> via MutationObserver and cleans up its subscription automatically.