useVyre

AI-native design system for humans and agents. Built on semantic CSS variables — no runtime magic, no hallucinations.

  

---

Why useVyre?

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 |

---

Packages

Core

| Package | Version | Downloads | Description | |---------|---------|-----------|-------------| | @usevyre/tokens |  |  | DTCG-compliant design tokens → CSS variables, JS/TS, JSON | | @usevyre/react |  |  | React + TypeScript components | | @usevyre/vue |  |  | Vue 3 + TypeScript components | | @usevyre/init |  |  | One-command setup CLI (npx @usevyre/init) | | @usevyre/all · react-all · vue-all | — | — | Convenience meta-packages (tokens + components in one install) |

AI tooling

| Package | Version | Downloads | Description | |---------|---------|-----------|-------------| | @usevyre/ai-context |  |  | Machine-readable component schema for LLM system prompts | | @usevyre/mcp-server |  |  | MCP server — gives agents live access to the component schema | | @usevyre/eslint-plugin |  |  | Lints for invalid variants, raw colors, hallucinated props | | @usevyre/validate-ai-context |  |  | CI check that the AI context stays in sync with components | | @usevyre/prompt-templates |  |  | Ready-made prompts for generating UI with useVyre |

---

Components

40+ production-ready components for React and Vue — buttons, forms (Input, Field, Radio, Checkbox, Select), overlays (Modal, Sheet, Popover, Tooltip), data (DataGrid, Table, Pagination), layout (Sidebar/AppLayout, Card, Tabs), and richer pieces like Kanban, Conversation (chat), DateRangePicker, and a zero-dependency RichTextEditor — plus more on the way.

Every component ships with an inline AI-context block, a machine-readable schema entry, and documented anti-patterns.

Browse the full list with live demos → usevyre.com/docs/components

---

Quick Start

# React
npm install @usevyre/tokens @usevyre/react

# Vue 3
npm install @usevyre/tokens @usevyre/vue

// Import once at your app entry point
import "@usevyre/react/styles";   // tokens + component styles (one import)

import { Button, Card, DataGrid } from "@usevyre/react";

Full setup guide → usevyre.com/docs/installation

---

Examples

Real, multi-page layouts built entirely from useVyre components:

• Dashboard app — functional 5-page billing dashboard with working sidebar navigation
• Sign-in — auth form with validation
• All examples →

---

Design Principles

1. Semantic over primitive — --vyre-color-semantic-accent not --amber-400
2. Explicit over implicit — every valid value is documented inline
3. Zero runtime — pure CSS variables, works in any framework
4. AI-first naming — token names describe intent, not appearance
5. Copy-paste friendly — no mandatory build setup, just import CSS and go

---

Monorepo Structure

usevyre/
├── packages/
│   ├── tokens/                @usevyre/tokens
│   ├── react/                 @usevyre/react
│   ├── vue/                   @usevyre/vue
│   ├── all/ react-all/ vue-all/   convenience meta-packages
│   ├── ai-context/            @usevyre/ai-context
│   ├── mcp-server/            @usevyre/mcp-server
│   ├── eslint-plugin/         @usevyre/eslint-plugin
│   ├── validate-ai-context/   @usevyre/validate-ai-context
│   └── prompt-templates/      @usevyre/prompt-templates
├── apps/
│   └── docs/                  usevyre.com documentation site
└── README.md

---

Local Development

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
pnpm --filter @usevyre/docs dev

Open http://localhost:4321 in your browser.

Shortcut — tokens build + dev server in one command:

pnpm dev:docs

---

Contributing

This project is in early development. Feedback, ideas, and bug reports are very welcome — open an issue to get started.

---

License

MIT © Gapra