One component system. Every brand.
54 components built on Base UI, all consuming a shared token contract. Pick any gallery kit and the whole system reskins, no component code changes. Every component ships rules an AI agent can actually follow.
Token contract
Every component consumes semantic --layout-* tokens only, never a hardcoded colour or spacing value. Swap the tokens and the components follow, no code changes required.
Every kit is a theme
All 58 kits published to the Gallery double as installable Layout UI themes. Point the shadcn CLI at a theme.json and your whole app reskins to that brand.
Rules for AI agents
Each component ships a machine-readable spec: which tokens it uses, what it should never do, and how it composes with the rest of the system. Agents follow the rules instead of guessing.
Two ways to install.
Add a single component with our CLI, or install an entire brand as a theme with the shadcn CLI. Both read the same registry spec.
Add a component
Our CLI drops the component source straight into your project, wired up to your existing tokens.
npx @layoutdesign/context add buttonInstall a theme
Point the shadcn CLI at any published kit's theme.json and reskin your whole app to that brand.
npx shadcn add https://layout.design/r/stripe/theme.jsonHow it fits together
01
Extract in Studio
Pull tokens from Figma or a live site into a Layout Studio project.
02
Publish a kit
Share it to the Gallery. Layout UI auto-generates a theme from the kit's tokens.
03
Theme and build anywhere
Install the theme and components in any project, then let your AI agent build with the rules attached.