Set your docs in paper and ink.
Elements is the UI component library of By Sages — warm paper, ink that reads, hierarchy carried by light. One token system dresses every control; one anatomy contract carries every framework.
Everything a product needs
Every component over one token system — interaction from headless state machines, every visual decision from the paper-and-ink layer.
A token system, not a stylesheet
Colors, spacing, radius, elevation, and motion resolve from --bs-* custom properties. Light and dark, accent pigments, contrast and density tiers — themes are data, never hardcoded styles.
Every component
Actions, forms, overlays, navigation, and data — one stylesheet serves every framework from the same anatomy of data-scope and data-part.
Data layers
A DataTable for dense information work — sorting, pinning, tree, drag reorder, virtual windows — and Charts painted straight from the tokens.
AI primitives
Conversation, reasoning, tools, and sources as first-class parts — the same ink, in conversation with your model.
Container-driven responsive
Components answer to the space they are given, not the viewport — the same control composes correctly in a sidebar, a card, or a full page.
Light as shadow
A lighting engine computes the shade — source, elevation, pigment bleed — and writes it to variables the styles merely consume. Motion obeys the same grammar: light needs time; ink bleeds.
Up and running in a minute
The wrappers bring the theme engine with them — install, apply the theme once, and every control speaks the same paper. Pick your framework; the components read identically.
pnpm add @bysages/vue @bysages/core
<script setup>
import { applyTheme } from "@bysages/core";
import { Button } from "@bysages/vue";
applyTheme({ mode: "light" });
</script>
<template>
<Button>Write in ink</Button>
</template>
import { applyTheme } from "@bysages/core";
import { Button } from "@bysages/react";
applyTheme({ mode: "light" });
export default function App() {
return <Button>Write in ink</Button>;
}
import { render } from "solid-js/web";
import { applyTheme } from "@bysages/core";
import { Button } from "@bysages/solid";
applyTheme({ mode: "light" });
render(() => <Button>Write in ink</Button>, document.getElementById("root"));
<script>
import { onMount } from "svelte";
import { applyTheme } from "@bysages/core";
import { Button } from "@bysages/svelte";
onMount(() => applyTheme({ mode: "light" }));
</script>
<Button>Write in ink</Button>
Now begin
The introduction walks the layers; the reference documents every part of every component.