@byteion/core

Byteion UI

Byteion UI is a Tailwind-first design system for building consistent product interfaces across HTML, React, and Vue. It is published as a small set of foundation packages that share the same design tokens, component contracts, and semantic theme layer.

Byteion UI is currently in beta. The current public beta version is 0.2.0-beta.1, and APIs may change before a stable release.

Packages

Package	Purpose
@byteion/tokens	Design token primitives for color, spacing, radius, shadows, typography, motion, z-index, borders, and breakpoints.
@byteion/core	Tailwind v3 preset, Tailwind v4 CSS entry, semantic theme layer, component schemas, canonical HTML, and CDN bundle.
@byteion/js	Framework-agnostic behavior runtime powered by data-bi-* attributes.
@byteion/react	Typed React components built on the Byteion component contracts.
@byteion/vue	Vue 3 components, slots, composables, and v-model support.

Installation

Install the packages you need:

npm install @byteion/core@beta @byteion/js@beta
npm install @byteion/react@beta
npm install @byteion/vue@beta

React and Vue users should also install @byteion/core. Install @byteion/js when you want Byteion's framework-agnostic behavior runtime.

Tailwind

Byteion supports Tailwind v3 and v4:

• Tailwind v3: use the preset exported from @byteion/core/preset.
• Tailwind v4: import the CSS theme entry from @byteion/core.
• No-build usage: use the precompiled CDN CSS and JavaScript bundle from @byteion/core.

HTML Usage

Import the theme CSS and initialize the behavior runtime:

import "@byteion/core";
import ByteionCore from "@byteion/js";

ByteionCore.init();

You can also use the CDN bundle from @byteion/core for no-build prototypes or static pages.

React Usage

import "@byteion/core";
import { Button, Card } from "@byteion/react";

export function Example() {
  return (
    <Card>
      <Button variant="primary">Continue</Button>
    </Card>
  );
}

Client-only interactive components are available from @byteion/react/client.

Vue Usage

<script setup>
import "@byteion/core";
import { Button, Card } from "@byteion/vue";
</script>

<template>
  <Card>
    <Button variant="primary">Continue</Button>
  </Card>
</template>

Theming

Byteion uses tokens for primitives and CSS variables for semantic theme values. Start with @byteion/tokens, then customize the semantic layer exposed by @byteion/core/theme.

Beta Status

This repository currently contains the public beta foundation packages only. The full documentation site and example apps are not included in this beta release.

License

MIT. See package-level LICENSE files for details.