@bysages/vue

@bysages/vue

By Sages Elements for Vue — 140+ accessible component families, headless by construction, dressed by the paper-and-ink style layer. The reference implementation of the library.

Features

• 🧩 140+ families — actions, forms, overlays, navigation, data, layout, an AI conversation family on ai-sdk formats, and a full generative vocabulary
• 🏛️ Headless inside — interaction, state, ARIA, and positioning come from proven headless state machines; wrappers add API narrowing and style injection, no DOM of their own
• 🎨 Token-styled — every visual value is a CSS custom property from @bysages/core; light/dark, accent pigments, contrast and density tiers are data, never hardcoded styles
• 📦 Container-driven — components respond to @container, not the viewport; the same component composes in a sidebar, a card, or a page
• 💡 SSR-ready — styles inject at module load with a head-marker guard, or ship as one build-time stylesheet through @bysages/nuxt
• ♿ Audited — every family walked through real interaction testing and axe checks in light/dark × accent × scene matrices

Installation

# pnpm
pnpm add @bysages/vue

# npm
npm install @bysages/vue

# yarn
yarn add @bysages/vue

# bun
bun add @bysages/vue

Quick Start

Theme the document, then use the components — the component import carries the whole token layer in with it:

// main.ts
import { applyTheme } from "@bysages/vue";

applyTheme({ mode: "system", accent: "ink" });

<!-- App.vue -->
<script setup lang="ts">
import { Button, Dialog } from "@bysages/vue";
</script>

<template>
  <Dialog.Root>
    <Dialog.Trigger>Delete item</Dialog.Trigger>
    <Teleport to="body">
      <Dialog.Backdrop />
      <Dialog.Positioner>
        <Dialog.Content>
          <Dialog.Title>Delete item</Dialog.Title>
          <Dialog.Description>This action cannot be undone.</Dialog.Description>
          <Dialog.CloseTrigger>×</Dialog.CloseTrigger>
        </Dialog.Content>
      </Dialog.Positioner>
    </Teleport>
  </Dialog.Root>
</template>

Generative UI

Every family carries a generative face — a zod-typed catalog entry that lives beside the component. The faces compose into a json-render catalog and render through the same package:

import { catalog } from "@bysages/vue/generative";

Point an AI SDK stream at the renderer and a prompt becomes real, on-brand components — constrained to the families you registered.

Documentation

The documentation site carries every family with live demos and props tables. Each family also has Storybook stories in this package (pnpm dev from the package root, port 6006).

License

• MIT © By Sages