@usevyre/vue

@usevyre/vue

Vue 3 + TypeScript components for the useVyre design system — AI-native, accessible, zero runtime styling.

Installation

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

Setup

Import once at your app entry point:

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

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

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

Place ToastViewport once in your root layout:

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

<template>
  <RouterView />
  <ToastViewport />
</template>

Usage

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

const { toast } = useToast();
</script>

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

Components

Full component docs → usevyre.com/docs/getting-started

Peer dependencies

{
  "vue": ">=3.3.0"
}

License

MIT © Gapra