Frameworks

The elements are standard custom elements with Shadow DOM, so any framework can render them and own their children. Import an element once to define it.

HTML and Astro

<script type="module">
  import '@raven/ui/xv-dialog'
  import '@raven/ui/xv-button'
</script>

<xv-dialog dialog-title="Delete item?">
  <xv-button slot="trigger" variant="destructive">Delete</xv-button>
  <p>This cannot be undone.</p>
</xv-dialog>

Solid

// src/xv-ui.d.ts
import type {} from '@raven/ui/solid'

// component.tsx
import '@raven/ui/xv-checkbox'
<xv-checkbox label="Remember me" on:xvChange={(e) => setRemember(e.detail.checked)} />

React 19

// src/xv-ui.d.ts
import type {} from '@raven/ui/react'

// component.tsx
import '@raven/ui/xv-checkbox'
<xv-checkbox label="Remember me" onxvChange={(e) => setRemember(e.detail.checked)} />

Forms

Inputs, checkboxes, switches, sliders, radio groups and autocomplete are form-associated: they submit under their name, validate, and reset with the form, and <xv-button type="submit"> submits it.