@byteion/react
v0.1.0-beta.1
Published
Typed React wrappers around the Byteion design system. Same markup, React props.
Downloads
154
Maintainers
byteionReadme
@byteion/react
Typed React wrappers for the Byteion design system.
@byteion/core is the source of truth for tokens, themes, accessibility
contracts, and canonical markup. @byteion/react turns that foundation into
typed React components with the same data-bi-* contracts, Tailwind classes,
and theme behavior.
Install
npm install @byteion/react @byteion/coreInstall @byteion/js only when you want to bind the framework-agnostic
behavior runtime yourself:
npm install @byteion/jsSetup
Import the core theme stack:
@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;Extend Tailwind with the core preset and scan the React package:
import preset from '@byteion/core/preset';
export default {
presets: [preset],
content: [
'./src/**/*.{ts,tsx}',
'./node_modules/@byteion/react/dist/**/*.{js,cjs}',
],
};Usage
import { Button, Card, Input } from '@byteion/react';
export function SignInCard() {
return (
<Card>
<Card.Header>
<Card.Title>Sign in</Card.Title>
<Card.Description>Use your workspace account.</Card.Description>
</Card.Header>
<Card.Body>
<Input label="Email" type="email" autoComplete="email" />
</Card.Body>
<Card.Footer>
<Button>Continue</Button>
</Card.Footer>
</Card>
);
}Entry Points
The main entry exports the full typed component surface:
import {
Accordion, Alert, Avatar, Badge, Breadcrumb, Button, Calendar, Card,
Checkbox, Combobox, DataTable, Datepicker, Drawer, Dropdown, EmptyState,
FileUpload, FormField, Input, Kanban, KpiWidget, Layout, List, Modal,
MultiSelect, Navbar, Pagination, Popover, Progress, Radio, Range, Search,
Select, Sidebar, Skeleton, Spinner, StatCard, Stepper, Switch, Table, Tabs,
TagsInput, Textarea, Timeline, ToastProvider, Tooltip, Typography,
AuthSignin, AuthSignup, AuthOtp, AuthForgotPassword, AuthResetPassword,
} from '@byteion/react';The client entry is available for frameworks that need an explicit client boundary:
import { Modal, Drawer, Dropdown, Popover, Tabs, ToastProvider } from '@byteion/react/client';Component Coverage
@byteion/react covers all 50 @byteion/core component folders. The five auth
screens are grouped in src/components/Auth.tsx, so the React package has 47
component files while still covering the full core surface.
Theming
Apply themes at the document root:
<html lang="en" data-theme="acme" className="dark">
<body>{children}</body>
</html>Components use semantic tokens like bg-card, text-foreground, and
border-border, plus primitive scales like primary, success, warning,
and danger.
Contracts
Every wrapper emits Byteion attributes so docs, tests, design tools, and optional runtime behavior can target the same DOM:
<button
data-bi-component="button"
data-bi-variant="solid"
data-bi-tone="primary"
data-bi-size="md"
>
Continue
</button>Utilities
import { cn, cva, type VariantProps, useByteionJs } from '@byteion/react';cn(...)- className merger with no runtime dependency.cva(base, config)- local class variance helper.useByteionJs(ref, modules)- bind optional@byteion/jsbehavior to a subtree.
Quality Gates
npm run validate --workspace @byteion/reactValidation runs TypeScript, server-safety checks, Vitest, build output, and bundle-size budgets.