Skip to content

README.md

Latest commit

 

History

History
89 lines (66 loc) · 2.86 KB

README.md

File metadata and controls

89 lines (66 loc) · 2.86 KB
Raw

@bysages/react

npm version npm downloads npm license

By Sages Elements for React — 140+ accessible component families, headless by construction, dressed by the paper-and-ink style layer. Ported from the Vue reference implementation, API for API.

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
  • 💡 Styles on import — each family injects its stylesheet at module load, guarded against double-injection
  • 📊 DataTable included — a TanStack Table v9 integration with drag reordering, pinning, tree data, and virtualization

Installation

# pnpm
pnpm add @bysages/react

# npm
npm install @bysages/react

# yarn
yarn add @bysages/react

# bun
bun add @bysages/react

Quick Start

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

// main.tsx
import { applyTheme } from "@bysages/react";

applyTheme({ mode: "system", accent: "ink" });
// App.tsx
import { Button, Dialog } from "@bysages/react";

export function App() {
  return (
    <Dialog.Root>
      <Dialog.Trigger asChild>
        <Button>Delete item</Button>
      </Dialog.Trigger>
      <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>
    </Dialog.Root>
  );
}

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/react/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.

License