@property typed tokens Shadow DOM native 10 components AI schema

The theme library that thinks in CSS

Typed design tokens via @property with inherits: true — the only mechanism that passes through Shadow DOM boundaries automatically. Zero-JS dark mode, container-scoped theming, native <dialog> modals, and a machine-readable AI schema generated at build time.

@property @layer color-mix() light-dark() container-type @starting-style :has() oklch() <dialog> adoptedStyleSheets
Browse Documentation npm install View Source

@property typed tokens

All 44 tokens declared with syntax, inherits, and initial-value — enabling CSS animation, type validation, and Shadow DOM inheritance.

Shadow DOM native

Tokens cross shadow boundaries automatically via inherits: true. No CSS injection, no ::part() — just works.

Token transitions

Because tokens are typed as <color>, CSS interpolates them. Transition every element on the page from one theme to another — no JS animation.

10 production components

Button, Card, Badge, Input, Select, Switch, Alert, Tooltip, Modal, Toast — all built on modern CSS and native HTML elements.

AI schema at build time

volty.schema.json and llms.txt auto-generated from @property declarations — give your AI assistant the full API without hallucinations.

Component shorthand syntax

Three ways to add components: <vt-nav> custom elements, data-vt-insert attributes, or Volty.insert() JS API.

Quick look

Components that react to brand & theme

Every color token is derived from --vt-color-brand via color-mix(). Switch themes with the nav controls — everything updates in 350ms with no JavaScript.

Default Solid Success Warning Danger Surface
See all 10 components →