@corvaui/astro

Astro static-page and island integration helpers over CorvaUI's shared custom elements. React is not required.

Supported Astro versions: 5, 6, and 7.

npm install @corvaui/astro @corvaui/tokens astro

Load tokens in a shared layout and register from a client script:

---
import "@corvaui/tokens/css";
---

<main data-corva-theme="rose-light">
  <corva-card eyebrow="Status" heading="Static content">
    <corva-button variant="primary">Open</corva-button>
  </corva-card>
  <corva-app-bar heading="Workspace">
    <corva-button slot="actions">Save</corva-button>
  </corva-app-bar>
</main>

<script>
  import { onCorvaEvent, registerCorvaUI, setCorvaProperty } from "@corvaui/astro";
  await registerCorvaUI();

  const chart = document.querySelector("corva-chart");
  if (chart) {
    setCorvaProperty(chart, "data", [{ label: "Ready", value: 92 }]);
  }

  const select = document.querySelector("corva-select");
  if (select) {
    onCorvaEvent<{ value: string }>(select, "corvaChange", ({ detail }) => {
      console.info(detail.value);
    });
  }
</script>

Static custom-element markup renders before registration and upgrades in the browser. Astro's registration helper uses the eager custom-elements build so bundled static sites do not depend on runtime component chunk URLs. Use setCorvaProperty for arrays and objects and onCorvaEvent for typed custom events. Default children and native named slots remain static HTML, and data-corva-theme scopes tokens before hydration. Per-component helpers are available from @corvaui/astro/components. See the CorvaUI documentation and included support policy.