Installation

Set up useVyre in your React or Vue 3 project. Import the tokens and styles once, then import components anywhere.

Install packages

You need two packages: the framework adapter (@usevyre/react or @usevyre/vue) and the shared design tokens (@usevyre/tokens).

# Install tokens (required) + React components
npm install @usevyre/tokens @usevyre/react
# or
pnpm add @usevyre/tokens @usevyre/react

# Install tokens (required) + Vue 3 components
npm install @usevyre/tokens @usevyre/vue
# or
pnpm add @usevyre/tokens @usevyre/vue

Want everything in one command? Use a meta-package to get tokens + AI tooling (MCP server, ESLint plugin, validate CLI, prompt templates) bundled together.

# React only
npm i @usevyre/react-all

# Vue only
npm i @usevyre/vue-all

# React + Vue + everything
npm i @usevyre/all

Import from the specific sub-packages as usual — tree-shaking still works.

Import styles

Add these two imports at your app entry point. Order matters — tokens must come before component styles.

// main.tsx — import once at your app entry point
import "@usevyre/tokens/css";      // ← design tokens (required)
import "@usevyre/react/styles";    // ← component styles (required)

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { ToastProvider } from "@usevyre/react";
import App from "./App";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <ToastProvider>
      <App />
    </ToastProvider>
  </StrictMode>
);

// main.ts — import once at your app entry point
import "@usevyre/tokens/css";      // ← design tokens (required)
import "@usevyre/vue/styles";      // ← component styles (required)

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

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

Vue: add ToastViewport

In Vue, place ToastViewport once in your root layout. This is where toast notifications will be rendered.

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

Usage

Import components directly from the package — no registration or plugin required.

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

export function ProfileCard() {
  const { toast } = useToast();
  return (
    <Card variant="elevated">
      <CardHeader>
        <Badge variant="success">Active</Badge>
      </CardHeader>
      <CardBody>
        <Button
          variant="accent"
          onClick={() => toast({ title: "Saved!", variant: "success" })}
        >
          Save changes
        </Button>
      </CardBody>
    </Card>
  );
}

<script setup lang="ts">
import { Button, Badge, Card, CardHeader, CardBody } from "@usevyre/vue";
import { useToast } from "@usevyre/vue";
const { toast } = useToast();
</script>

<template>
  <Card variant="elevated">
    <CardHeader>
      <Badge variant="success">Active</Badge>
    </CardHeader>
    <CardBody>
      <Button
        variant="accent"
        @click="toast({ title: 'Saved!', variant: 'success' })"
      >
        Save changes
      </Button>
    </CardBody>
  </Card>
</template>

Local development

To run the docs site locally or contribute to useVyre:

# Clone the repo
git clone https://github.com/gapra/usevyre.git
cd usevyre

# Install dependencies
pnpm install

# Build packages
pnpm --filter @usevyre/tokens build

# Run docs site locally
SITE_MODE=live pnpm --filter @usevyre/docs dev

← Getting Started AI Context →