Getting Started

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

Quick setup

In an existing React or Vue project, run one command — it installs the package, adds the styles import, and guides the rest:

npx @usevyre/init

Prefer to do it by hand? The manual steps are below.

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 styles once at your app entry point. This single file includes the design tokens and all component styles.

// main.tsx or your entry file
import "@usevyre/react/styles";      // ← tokens + component styles (one import)

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

// main.ts
import "@usevyre/vue/styles";        // ← tokens + component styles (one import)

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

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

Next.js App Router: components work in Server Components out of the box — the React package ships with the "use client" directive, so you don't need to add it yourself.

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 →