Props for behavior

Every knob is a typed prop with a default — variant, size, placement, delays, close behavior. State changes come back as xv* events.

Tokens for appearance

Tokens are Tailwind v4 theme variables (--color-primary, --radius-md, …). Each component reads them with a built-in default, so a value set on any ancestor wins. The same buttons, three scopes:

/* Whole app, with Tailwind: the same utilities work in your own markup */
@import 'tailwindcss';
@import '@raven/ui/theme.css';
@theme { --color-primary: #7c3aed; }

/* Whole app, no Tailwind */
:root { --color-primary: #7c3aed; }

/* Named theme, light or dark */
@import '@raven/ui/themes/dracula.css';  /* <html data-theme="dracula" data-scheme="dark"> */

/* One subtree */
<section style="--color-primary: #c2410c">…</section>

Token set

Surfaces bg bg-2 bg-3, text text text-2 text-3, borders, and roles primary secondary ghost destructive muted accent success warning with -fg and -hover pairs; radii, layers (--z-overlay --z-popover --z-toast) and Tailwind's own spacing and type scale. The full list is in the package README.