Small, stable parts.
Composed into systems you own.
LatticeUI is a design system built against the failure modes of MUI, AntD, and Chakra: 28 accessible components, zero-runtime styling, a framework-agnostic core, versioned anatomy contracts, and an eject command that keeps an upgrade path.
import "latticeui-tokens/tokens.css";
import "latticeui-styles/index.css";
import { Button } from "latticeui-react";What existing libraries get wrong
The customization cliff
MUI/AntD make the first 80% easy and the last 20% brutal: specificity wars, undocumented class names, !important.
Runtime CSS-in-JS tax
Emotion-style runtimes bloat bundles, slow hydration, and break under React Server Components.
No ownership middle ground
npm packages lock you out of internals; copy-paste kits cut you off from upstream fixes forever.
AI hallucinates your UI
LLMs generate outdated component APIs because libraries ship no machine-readable contracts.
The LatticeUI answer
Anatomy contract
Stable data-scope/data-part attributes on every part - a versioned public API for styles and tests.
Zero-runtime cascade layers
All CSS lives in @layer latticeui. Your unlayered app CSS always wins. RSC-safe by construction.
Framework-agnostic core
Behavior lives in plain-TS state machines and stores; React is a thin adapter.
Eject with an upgrade path
latticeui add copies source into your repo; latticeui update 3-way merges upstream improvements into your edits.
Token-first theming
W3C token JSON compiles to reference + semantic CSS variable tiers. Swap themes with one attribute.
AI-native manifests
Every component ships a machine-readable manifest, aggregated into llms.txt for coding agents.
Override anything without a fight
Every LatticeUI rule lives inside @layer latticeui and targets stable anatomy attributes. This is the entire override story - no !important, no class-name spelunking, guaranteed stable across upgrades:
/* your plain app css - always wins, because LatticeUI's CSS is layered */
[data-scope="button"][data-part="root"] {
--button-bg: rebeccapurple;
border-radius: 0;
}