AI-native design system for humans and agents. Built on semantic CSS variables — no runtime magic, no hallucinations.
Most design systems were built for humans reading documentation. useVyre is built for both — every naming convention, token structure, and component API is designed so that AI coding agents (Claude, Cursor, Copilot, Windsurf) can generate correct, consistent UI without guessing.
| Problem | useVyre solution |
|---|---|
| AI hallucinates component props | Every component has an inline AI context block |
| AI uses raw color values | Semantic tokens replace all raw colors |
| AI generates inconsistent spacing | 4px grid enforced via spacing tokens |
| AI doesn't know valid variants | data-variant API is explicit and enumerated |
| Design system only works in one framework | CSS variables work everywhere |
| Package | Version | Description |
|---|---|---|
@usevyre/tokens |
 |
DTCG-compliant design tokens → CSS variables, JS/TS, JSON |
@usevyre/react |
|
React + TypeScript components |
@usevyre/vue |
 |
Vue 3 + TypeScript components |
@usevyre/ai-context |
 |
Machine-readable context for LLM system prompts |
# React
npm install @usevyre/tokens @usevyre/react
# Vue 3
npm install @usevyre/tokens @usevyre/vue// Import once at your app entry point
import "@usevyre/tokens/css"; // design tokens (required)
import "@usevyre/react/styles"; // component styles
import { Button, Badge, Card } from "@usevyre/react";Full setup guide → usevyre.com/docs/installation
- Semantic over primitive —
--vyre-color-semantic-accentnot--amber-400 - Explicit over implicit — every valid value is documented inline
- Zero runtime — pure CSS variables, works in any framework
- AI-first naming — token names describe intent, not appearance
- Copy-paste friendly — no mandatory build setup, just import CSS and go
usevyre/
├── packages/
│ ├── tokens/ @usevyre/tokens
│ ├── react/ @usevyre/react
│ ├── vue/ @usevyre/vue
│ └── ai-context/ @usevyre/ai-context
├── apps/
│ └── docs/ usevyre.com documentation site
└── README.md
Run the docs site locally to browse all component examples and live demos.
Prerequisites: Node.js ≥ 18, pnpm ≥ 9
# 1. Clone and install
git clone https://github.com/gapra/usevyre.git
cd usevyre
pnpm install
# 2. Build design tokens (required — components import CSS variables from here)
pnpm --filter @usevyre/tokens build
# 3. Start the docs dev server
SITE_MODE=live pnpm --filter @usevyre/docs devOpen http://localhost:4321 in your browser.
Why
SITE_MODE=live? Without it the landing page shows a coming-soon screen. All/docs/*pages are accessible either way.
Shortcut — tokens build + dev server in one command:
SITE_MODE=live pnpm dev:docsThis project is in early development. Feedback, ideas, and bug reports are very welcome — open an issue to get started.
MIT © Gapra