Skip to content
Voidable

Astro

No adapter package needed — web components work directly in Astro templates.

Install

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

Usage

Section titled “Usage”

Import the component definitions in a <script> tag and the theme CSS globally:

---
import '@voidable/theme';
---


<html data-theme="dark">
  <head>
    <title>My App</title>
  </head>
  <body>
    <void-button variant="filled">Click me</void-button>
    <void-input placeholder="Your name"></void-input>


    <script>
      import '@voidable/ui';


      document.querySelector('void-button')!.addEventListener('void-click', () => {
        console.log('clicked');
      });
    </script>
  </body>
</html>

Gotchas

Section titled “Gotchas”

Scoped styles don’t reach Light DOM internals

Section titled “Scoped styles don’t reach Light DOM internals”

Astro’s scoped <style> tags add data-astro-* attributes to selectors, which won’t match Light DOM component internals. Use is:global on style tags or import theme CSS globally:

<style is:global>
  void-button {
    --void-button-radius: 8px;
  }
</style>

Curly braces in templates

Section titled “Curly braces in templates”

Curly braces {} are expression delimiters in Astro templates. If you’re rendering CSS or code content that contains braces, use set:html:

<pre><code set:html={`void-button { --void-button-radius: 8px; }`}></code></pre>

Theme switching

Section titled “Theme switching”

Set the theme via the data-theme attribute on the root element:

<html data-theme="dark">

For dynamic switching, use a client-side script:

<script>
  document.documentElement.dataset.theme =
    window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
</script>