React adapter

Install

npm install @byteion/react@0.2.0-beta.1 @byteion/core@0.2.0-beta.1
# Optional — only if you use Modal, Drawer, Dropdown, etc.
npm install @byteion/js@0.2.0-beta.1

Works under both Tailwind v4 (recommended) and Tailwind v3. Pick your path below.

Single CSS entry — no tailwind.config.js.

1. Wire Tailwind v4 into your bundler

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

2. Single CSS entry

/* app.css */
@import "tailwindcss";
@import "@byteion/core";

/* Optional brand themes */
@import "@byteion/core/theme/themes/acme.css";
@import "@byteion/core/theme/themes/midnight.css";

/* Tell Tailwind to scan the React adapter's published dist
   so class strings built at runtime get compiled. */
@source "../node_modules/@byteion/react/dist";
@source "../node_modules/@byteion/js/src";

Note: Adjust the relative path to node_modules if your CSS file is nested deeper inside your project directories.

3. Use components

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

export default function SignIn() {
  return (
    <Card>
      <Card.Header>
        <Card.Title>Welcome back</Card.Title>
      </Card.Header>
      <Card.Body className="space-y-3">
        <Input label="Email" type="email" />
        <Input label="Password" type="password" />
      </Card.Body>
      <Card.Footer>
        <Button block>Sign in</Button>
      </Card.Footer>
    </Card>
  );
}

Setup — Tailwind v3

For projects still on Tailwind v3. Preset + manual CSS imports.

1. Theme stack (CSS)

/* app.css */
@import "@byteion/core/theme/generated/tokens.css";
@import "@byteion/core/theme/variables.css";
@import "@byteion/core/theme/themes/acme.css";
@import "@byteion/core/theme/themes/midnight.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

2. Tailwind preset

// tailwind.config.js
const preset = require('@byteion/core/preset');

module.exports = {
  presets: [preset],
  // Variant form so `dark:` fires under BOTH `.dark` and `[data-theme="dark"]`.
  darkMode: ['variant', ['&:is(.dark *)', '&:is([data-theme="dark"] *)']],
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/@byteion/react/dist/**/*.{js,cjs}',
    './node_modules/@byteion/js/src/**/*.js',
  ],
};

Component import code is identical to the v4 path above — only the wiring differs.

Server-safe vs client entries

React Server Components need a hard boundary between server-rendered and client-interactive code. The package exposes two entries so bundlers can split safely.

Server-safe primitives are exported from the default entry and guarded by npm run lint:server-safe.

Variant, tone, size, and state

Every styled component shares the same unified variant × tone × size × state contract.

<Button
  variant="solid" | "outline" | "ghost" | "soft" | "link"
  tone="neutral" | "primary" | "secondary" | "success" | "warning" | "danger" | "info"
  size="xs" | "sm" | "md" | "lg" | "xl"
  loading={false}
  disabled={false}
>
  Save changes
</Button>

Where a component supports tone, the values map consistently across the system. For example, tone="danger" renders red for Button, Badge, Alert, Toast, and Input error states — without any per-component override.

Hooks

Build your own interactive primitives without reimplementing focus management.

Brand theming

Apply at the document root — every token-driven component re-skins automatically.

<html lang="en" data-theme="acme" class="dark">
  …
</html>

Themes primarily update semantic tokens such as bg-card, text-foreground, bg-primary, and text-primary-foreground. Primitive scales remain available for advanced cases, but shared components should prefer semantic tokens.

Compose your own

Use the same cva() + cn() utilities exported by the package.

import { cva, cn, type VariantProps } from '@byteion/react';

const card = cva('rounded-card border bg-card text-card-foreground', {
  variants: {
    elevation: { flat: 'shadow-none', raised: 'shadow-card' },
    tone:      { neutral: 'border-border', primary: 'border-primary/40' },
  },
  defaultVariants: { elevation: 'raised', tone: 'neutral' },
});

type Props = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof card>;

export function MyCard({ elevation, tone, className, ...rest }: Props) {
  return <div className={card({ elevation, tone, className })} {...rest} />;
}

47 component families shipped

Covers the React-ready component families from the core system, aligned with the core component contracts. Click any component to see its anatomy, accessibility contract, and code.

See it live

Explore interactive patterns and components built on top of the React adapter.