{
  "markdown": "# useVyre\n\n> AI-native design system for humans and agents. Built on semantic CSS variables — no runtime magic, no hallucinations.\n\n[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)\n[![npm](https://img.shields.io/npm/v/@usevyre/react)](https://www.npmjs.com/package/@usevyre/react)\n[![usevyre.com](https://img.shields.io/badge/site-usevyre.com-7c3aed)](https://usevyre.com)\n\n---\n\n## Why useVyre?\n\nMost 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.\n\n| Problem | useVyre solution |\n|---------|-----------------|\n| AI hallucinates component props | Every component has an inline AI context block |\n| AI uses raw color values | Semantic tokens replace all raw colors |\n| AI generates inconsistent spacing | 4px grid enforced via spacing tokens |\n| AI doesn't know valid variants | `data-variant` API is explicit and enumerated |\n| Design system only works in one framework | CSS variables work everywhere |\n\n---\n\n## Packages\n\n**Core**\n\n| Package | Version | Downloads | Description |\n|---------|---------|-----------|-------------|\n| [`@usevyre/tokens`](./packages/tokens) | [![npm](https://img.shields.io/npm/v/@usevyre/tokens)](https://www.npmjs.com/package/@usevyre/tokens) | [![downloads](https://img.shields.io/npm/dt/@usevyre/tokens)](https://www.npmjs.com/package/@usevyre/tokens) | DTCG-compliant design tokens → CSS variables, JS/TS, JSON |\n| [`@usevyre/react`](./packages/react) | [![npm](https://img.shields.io/npm/v/@usevyre/react)](https://www.npmjs.com/package/@usevyre/react) | [![downloads](https://img.shields.io/npm/dt/@usevyre/react)](https://www.npmjs.com/package/@usevyre/react) | React + TypeScript components |\n| [`@usevyre/vue`](./packages/vue) | [![npm](https://img.shields.io/npm/v/@usevyre/vue)](https://www.npmjs.com/package/@usevyre/vue) | [![downloads](https://img.shields.io/npm/dt/@usevyre/vue)](https://www.npmjs.com/package/@usevyre/vue) | Vue 3 + TypeScript components |\n| [`@usevyre/init`](./packages/init) | [![npm](https://img.shields.io/npm/v/@usevyre/init)](https://www.npmjs.com/package/@usevyre/init) | [![downloads](https://img.shields.io/npm/dt/@usevyre/init)](https://www.npmjs.com/package/@usevyre/init) | One-command setup CLI (`npx @usevyre/init`) |\n| [`@usevyre/all`](./packages/all) · [`react-all`](./packages/react-all) · [`vue-all`](./packages/vue-all) | — | — | Convenience meta-packages (tokens + components in one install) |\n\n**AI tooling**\n\n| Package | Version | Downloads | Description |\n|---------|---------|-----------|-------------|\n| [`@usevyre/ai-context`](./packages/ai-context) | [![npm](https://img.shields.io/npm/v/@usevyre/ai-context)](https://www.npmjs.com/package/@usevyre/ai-context) | [![downloads](https://img.shields.io/npm/dt/@usevyre/ai-context)](https://www.npmjs.com/package/@usevyre/ai-context) | Machine-readable component schema for LLM system prompts |\n| [`@usevyre/mcp-server`](./packages/mcp-server) | [![npm](https://img.shields.io/npm/v/@usevyre/mcp-server)](https://www.npmjs.com/package/@usevyre/mcp-server) | [![downloads](https://img.shields.io/npm/dt/@usevyre/mcp-server)](https://www.npmjs.com/package/@usevyre/mcp-server) | MCP server — gives agents live access to the component schema |\n| [`@usevyre/eslint-plugin`](./packages/eslint-plugin) | [![npm](https://img.shields.io/npm/v/@usevyre/eslint-plugin)](https://www.npmjs.com/package/@usevyre/eslint-plugin) | [![downloads](https://img.shields.io/npm/dt/@usevyre/eslint-plugin)](https://www.npmjs.com/package/@usevyre/eslint-plugin) | Lints for invalid variants, raw colors, hallucinated props |\n| [`@usevyre/validate-ai-context`](./packages/validate-ai-context) | [![npm](https://img.shields.io/npm/v/@usevyre/validate-ai-context)](https://www.npmjs.com/package/@usevyre/validate-ai-context) | [![downloads](https://img.shields.io/npm/dt/@usevyre/validate-ai-context)](https://www.npmjs.com/package/@usevyre/validate-ai-context) | CI check that the AI context stays in sync with components |\n| [`@usevyre/prompt-templates`](./packages/prompt-templates) | [![npm](https://img.shields.io/npm/v/@usevyre/prompt-templates)](https://www.npmjs.com/package/@usevyre/prompt-templates) | [![downloads](https://img.shields.io/npm/dt/@usevyre/prompt-templates)](https://www.npmjs.com/package/@usevyre/prompt-templates) | Ready-made prompts for generating UI with useVyre |\n\n---\n\n## Components\n\n**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.\n\nEvery component ships with an inline AI-context block, a machine-readable schema entry, and documented anti-patterns.\n\nBrowse the full list with live demos → [usevyre.com/docs/components](https://usevyre.com/docs/components)\n\n---\n\n## Quick Start\n\n```bash\n# React\nnpm install @usevyre/tokens @usevyre/react\n\n# Vue 3\nnpm install @usevyre/tokens @usevyre/vue\n```\n\n```ts\n// Import once at your app entry point\nimport \"@usevyre/react/styles\";   // tokens + component styles (one import)\n\nimport { Button, Card, DataGrid } from \"@usevyre/react\";\n```\n\nFull setup guide → [usevyre.com/docs/installation](https://usevyre.com/docs/installation)\n\n---\n\n## Examples\n\nReal, multi-page layouts built entirely from useVyre components:\n\n- **[Dashboard app](https://usevyre.com/examples/dashboard-app/)** — functional 5-page billing dashboard with working sidebar navigation\n- **[Sign-in](https://usevyre.com/examples/auth)** — auth form with validation\n- [All examples →](https://usevyre.com/examples)\n\n---\n\n## Design Principles\n\n1. **Semantic over primitive** — `--vyre-color-semantic-accent` not `--amber-400`\n2. **Explicit over implicit** — every valid value is documented inline\n3. **Zero runtime** — pure CSS variables, works in any framework\n4. **AI-first naming** — token names describe *intent*, not *appearance*\n5. **Copy-paste friendly** — no mandatory build setup, just import CSS and go\n\n---\n\n## Monorepo Structure\n\n```\nusevyre/\n├── packages/\n│   ├── tokens/                @usevyre/tokens\n│   ├── react/                 @usevyre/react\n│   ├── vue/                   @usevyre/vue\n│   ├── all/ react-all/ vue-all/   convenience meta-packages\n│   ├── ai-context/            @usevyre/ai-context\n│   ├── mcp-server/            @usevyre/mcp-server\n│   ├── eslint-plugin/         @usevyre/eslint-plugin\n│   ├── validate-ai-context/   @usevyre/validate-ai-context\n│   └── prompt-templates/      @usevyre/prompt-templates\n├── apps/\n│   └── docs/                  usevyre.com documentation site\n└── README.md\n```\n\n---\n\n## Local Development\n\nRun the docs site locally to browse all component examples and live demos.\n\n**Prerequisites:** Node.js ≥ 18, pnpm ≥ 9\n\n```bash\n# 1. Clone and install\ngit clone https://github.com/gapra/usevyre.git\ncd usevyre\npnpm install\n\n# 2. Build design tokens (required — components import CSS variables from here)\npnpm --filter @usevyre/tokens build\n\n# 3. Start the docs dev server\npnpm --filter @usevyre/docs dev\n```\n\nOpen `http://localhost:4321` in your browser.\n\n**Shortcut** — tokens build + dev server in one command:\n\n```bash\npnpm dev:docs\n```\n\n---\n\n## Contributing\n\nThis project is in early development. Feedback, ideas, and bug reports are very welcome — [open an issue](https://github.com/gapra/usevyre/issues) to get started.\n\n---\n\n## License\n\nMIT © [Gapra](https://gapra.dev)\n",
  "bytes": 7765,
  "sha": "4cfd613b50a0bb5cfc1603fdfcf92857c57135d0e3c97be52fcb1aa187cbaf9f",
  "repo_slug": "gapra/usevyre",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_io_github_gapra_usevyre_context_1d6ac7ed/readme"
}