Getting Started

Install useVyre, import the styles, and start building - in React or Vue. Your AI agent will know exactly what to generate.

Installation

npm install @usevyre/tokens @usevyre/react
# or
pnpm add @usevyre/tokens @usevyre/react

npm install @usevyre/tokens @usevyre/vue
# or
pnpm add @usevyre/tokens @usevyre/vue

# React + tokens + all AI tooling
npm install @usevyre/react-all
# or
pnpm add @usevyre/react-all

# Then import as usual:
# import { Button } from "@usevyre/react"

# Vue + tokens + all AI tooling
npm install @usevyre/vue-all
# or
pnpm add @usevyre/vue-all

# Then import as usual:
# import { Button } from "@usevyre/vue"

# React + Vue + tokens + all AI tooling
npm install @usevyre/all
# or
pnpm add @usevyre/all

Setup

Import the tokens CSS and component styles once at your app entry point.

// main.tsx or your entry file
import "@usevyre/tokens/css";        // ← design tokens
import "@usevyre/react/styles";      // ← component styles

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

// main.ts
import "@usevyre/tokens/css";
import "@usevyre/vue/styles";

import { createApp } from "vue";
import App from "./App.vue";

createApp(App).mount("#app");

Usage

import { Button, Badge, Card, CardBody } from "@usevyre/react";
import { ToastProvider, useToast } from "@usevyre/react";

// Wrap your app with ToastProvider
function App() {
  return (
    <ToastProvider>
      <MyPage />
    </ToastProvider>
  );
}

function MyPage() {
  const { toast } = useToast();

  return (
    <Card variant="elevated">
      <CardBody>
        <Badge variant="success">Live</Badge>
        <Button
          variant="accent"
          onClick={() => toast({ title: "Saved!", variant: "success" })}
        >
          Save changes
        </Button>
      </CardBody>
    </Card>
  );
}

<!-- App.vue -->
<script setup lang="ts">
import { ToastViewport } from "@usevyre/vue";
</script>
<template>
  <RouterView />
  <ToastViewport />
</template>

<!-- MyPage.vue -->
<script setup lang="ts">
import { Button, Badge, Card, CardBody } from "@usevyre/vue";
import { useToast } from "@usevyre/vue";
const { toast } = useToast();
</script>
<template>
  <Card variant="elevated">
    <CardBody>
      <Badge variant="success">Live</Badge>
      <Button variant="accent" @click="toast({ title: 'Saved!', variant: 'success' })">
        Save changes
      </Button>
    </CardBody>
  </Card>
</template>

Set up AI context

The real power of useVyre is the AI context file. Add it to your project's agent rules so your coding agent knows every valid prop and variant.

Why this matters: Without context, AI agents invent props that don't exist. With it, they generate correct, type-safe component code on the first try.

# Add to CLAUDE.md, .cursor/rules, or AGENTS.md
# (auto-generate with: npx @usevyre/ai-context init --claude)

$(cat node_modules/@usevyre/tokens/dist/ai-context.md)

Or manually copy the contents of node_modules/@usevyre/tokens/dist/ai-context.md into your agent rules file.

Next Installation →