50 components, single-source tokens, multi-theme, accessibility-checked, contrast-validated. Copy the markup, ship the app — the foundation does the work.
Why Byteion
Every contract — variants, tones, states, ARIA, contrast — is enforced by a script. Not a guideline.
Primitives in JS, semantic aliases as CSS variables. One file changes — preset, themes, runtime all stay in sync.
Brand themes via [data-theme]. Every component re-skins automatically — no per-component overrides.
Every theme × every body/UI pair runs through a contrast checker in CI. Failing themes don't ship.
Focus traps, arrow navigation, ARIA roles — built into the JS package, not bolted on.
Variant × Tone × Size × State. No flat enums of 30 strings. Component schemas enforce the contract.
Copy raw HTML. No framework lock-in. React and Vue adapters ship from the same design contract.
Live
This card is real markup. Pick a theme above — it re-skins instantly.
A real component. Switch the theme picker to watch it re-skin.
50+ components
Inputs, selects, switches, ranges, validation
Alerts, toasts, progress, skeletons
Modals, drawers, popovers, tooltips
Navbars, sidebars, tabs, breadcrumbs
Cards, tables, accordions, timelines
Heading, paragraph, blockquote, code
Sign in, sign up, OTP, password reset
Data table, calendar, kanban
Stop wiring tokens, focus rings, ARIA, and contrast by hand. Byteion does it once — every project after is just composition.