Introduction

Elements is the UI component library of By Sages. It ships 140+ component families — buttons, dialogs, data tables, AI chat surfaces — for React, Vue, Solid, and Svelte, with one design system behind all four: warm paper surfaces, ink-first actions, and a shape language of square controls and round vessels.

#Features

• Interaction and appearance are separate. State, keyboard, ARIA, and positioning come from proven headless state machines; every visual decision lives in a single style layer. Restyle the whole library without touching a single behavior.
• Theme by attributes. Light/dark, accent pigments, thirteen scenes, four density tiers, and a contrast tier are all attributes on the root element — data-theme, data-accent, data-scene, data-density, data-contrast. No component forks, no separate dark-mode stylesheets.
• One anatomy across frameworks. Every component renders the same parts with stable data-scope / data-part attributes, so one stylesheet serves all four frameworks — and tests and tools select parts by attribute, not by class names.
• Values come from tokens. All colors, spacing, radii, shadows, and motion resolve from --bs-* CSS variables. Override a variable to override a decision.
• Inclusive defaults. Three control heights (28 / 32 / 36 px), four density tiers, a high-contrast tier, and a scene tuned for elder-facing government desktops.

#Quick taste

<script setup lang="ts">
import { Button } from "@bysages/vue";
</script>

<template>
  <Button variant="solid" tone="ink">Publish</Button>
</template>

See Installation for setup in your framework, and Theming for everything applyTheme can do.

#Packages