Introduction

What is Byteion UI?

Byteion UI is a token-first, Tailwind-powered design system for building SaaS dashboards, admin panels, internal tools, ecommerce back offices, and enterprise-style applications. It provides reusable HTML component primitives connected to a centralized design token system through a Tailwind CSS preset.

Unlike framework-only component libraries, Byteion UI starts from framework-agnostic HTML, design tokens, CSS variables, and Tailwind-powered styling. React and Vue packages build on top of the same foundation.

Byteion is the broader product ecosystem; Byteion UI is its design-system foundation.

How Byteion UI works

Byteion UI is structured as a layered system. Each layer builds on the one below it:

Why Byteion UI exists

Most design systems force you into a specific framework or styling approach. Byteion UI takes a different path: it separates structure (HTML semantics) from style (Tailwind tokens), giving you both the consistency of a design system and the flexibility of framework-agnostic markup.

The system is designed around common product workflows — authentication, dashboards, settings pages, tables, forms, ecommerce admin panels, and internal tools. Every component is built to compose naturally into these patterns.

System philosophy

1. Tokens are the source of truth

Every color, spacing, shadow, and radius in Byteion UI comes from a token defined in packages/tokens/. Shared components avoid arbitrary one-off values like bg-blue-500 or p-[13px] and prefer semantic tokens or approved scale values. The token system ensures that changing a single variable updates every component consistently.

2. Tailwind is the implementation layer

Tailwind utility classes are the bridge between tokens and rendered HTML. The @byteion/core Tailwind preset maps CSS variables to Tailwind classes, so bg-primary resolves to hsl(var(--primary)) at runtime. You get Tailwind's developer experience within a controlled design system.

3. Components are composable primitives

A Byteion UI component is a self-contained HTML structure. It does not accept JSON configuration or render callbacks. Instead, you compose components together: a Card contains a Header, Body, and Footer. A Form contains Labels, Inputs, and Buttons. This composability is what makes the system framework-agnostic.

4. Framework support builds on the same foundation

@byteion/react and @byteion/vue expose framework-native components built on the same design foundation. They do not reimplement design tokens or styling. The same CSS variables, Tailwind preset, and component markup power all three targets.

5. Customization starts with tokens

The primary customization path is through the token layer — override CSS variables or extend the Tailwind preset. Component markup changes are a last resort. This keeps upgrades safe and rebranding fast.

Token structure

Byteion UI tokens live in two places: CSS variables (runtime) and JavaScript modules (build-time).

CSS Variables (runtime)

Defined in packages/core/theme/variables.css, these are HSL values that the browser reads at render time. They power the Tailwind preset's semantic color aliases:

:root {
 /* Semantic colors in HSL — change these to re-theme everything */
 --primary: 217 91% 60%;
 --success: 160 84% 30%;
 --danger: 350 89% 47%;

 /* Component surfaces */
 --background: 0 0% 100%;
 --foreground: 240 10% 3.9%;
 --border: 240 5.9% 90%;

 /* Spacing, z-index, motion */
 --spacing-sm: 0.5rem;
 --z-modal: 60;
 --motion-fast: 120ms;
}

JavaScript Tokens (build-time)

Defined in packages/tokens/, these JS modules export design tokens as structured objects consumed by the Tailwind preset:

Component architecture

Every component in packages/core/src/components/ follows the same structure:

Practical usage

Here is how a developer uses Byteion UI components in a project across HTML, React, and Vue.

Step 1: Install packages

Install the core styles and the behavior adapter matching your frontend stack:

npm install @byteion/core@0.2.0-beta.1 @byteion/js@0.2.0-beta.1

npm install @byteion/core@0.2.0-beta.1 @byteion/react@0.2.0-beta.1

npm install @byteion/core@0.2.0-beta.1 @byteion/vue@0.2.0-beta.1

Step 2: Configure Tailwind

Choose the path that matches your Tailwind version:

@import "tailwindcss";
@import "@byteion/core";

const byteionPreset = require('@byteion/core/preset');

module.exports = {
 presets: [byteionPreset],
 content: [
  './src/**/*.{html,js,jsx,tsx,vue}',
  './node_modules/@byteion/react/dist/**/*.{js,cjs}', // if React
  './node_modules/@byteion/vue/dist/**/*.{js,cjs}',   // if Vue
 ],
};

Step 3: Compose components

HTML — plain markup with Byteion UI tokens:

<div class="rounded-xl border border-border bg-card p-6 shadow-card">
<h2 class="text-lg font-semibold mb-4">Sign in</h2>
<form class="space-y-4">
 <div class="space-y-1">
  <label class="text-sm font-medium">Email</label>
  <input type="email" class="w-full rounded-lg border border-border px-3 py-2 text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none">
 </div>
 <button type="submit" class="inline-flex items-center justify-center gap-2 rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-button hover:bg-primary-700">Sign in</button>
</form>
</div>

React — framework components with bare imports:

import { Button, Card, Input } from '@byteion/react';

export function SignInCard() {
  return (
    <Card className="p-6">
      <h2 className="mb-4 text-lg font-semibold">Sign in</h2>
      <form className="space-y-4">
        <div className="space-y-1">
          <label className="text-sm font-medium">Email</label>
          <Input type="email" placeholder="you@example.com" />
        </div>
        <Button type="submit" variant="primary">Sign in</Button>
      </form>
    </Card>
  );
}

Vue — Single File Component with framework components:

<script setup lang="ts">
import { Button, Card, Input } from '@byteion/vue';
</script>

<template>
  <Card class="p-6">
    <h2 class="mb-4 text-lg font-semibold">Sign in</h2>
    <form class="space-y-4">
      <div class="space-y-1">
        <label class="text-sm font-medium">Email</label>
        <Input type="email" placeholder="you@example.com" />
      </div>
      <Button type="submit" variant="primary">Sign in</Button>
    </form>
  </Card>
</template>

Step 4: Customize the theme

/* Change the entire brand color — one variable updates all components */
:root {
 --primary: 270 100% 50%; /* Purple brand */
}

Do and Don't

Customization levels

Byteion UI is designed for deep customization through its token layer. You can override or extend at three levels, ordered from most recommended to last resort:

Level 1: Override CSS variables (recommended)

Change variables.css to re-theme the entire system. This is how white-labeling works — one file, every component updates.

Level 2: Extend the Tailwind preset

Add your own colors, spacing, or animations to the Tailwind config. Byteion UI's preset merges with your extensions.

Level 3: Override component markup

Copy any component from packages/core/src/components/ and modify its HTML. This is a last resort — prefer token-level changes.

Developer tips

Related pages

• Design Principles — The four rules governing every component
• Theming Guide — How to customize colors, dark mode, and motion
• Button Component — Example of a fully documented component