Layout UI

Introduction

Layout UI is a token-contracted, reskinnable component system built for the AI agent era.

What is Layout UI?

Layout UI is a component library with a single job: every component consumes only semantic design tokens, never primitives. That contract means you can swap a data-brand attribute, derived from a layout.md kit, and every component re-skins instantly, with no markup changes and no component rewrites.

Components are shadcn-compatible: install via the shadcn registry CLI, and they slot into any project that already has a shadcn or tweakcn theme. The Layout token fallback chain means the shadcn theme wins when it is present; Layout tokens drive everything when it is not.

Every component ships with machine-readable meta.usage, meta.never, and meta.tokens rules in the registry JSON. AI coding agents read those rules via the Layout MCP server, then the check_compliance tool validates generated code before it lands in your codebase.

Three principles

01

Semantic tokens only

Components reference intent tokens (--layout-primary, --layout-border, --layout-muted-fg) not raw values. Changing a token changes every surface that uses it. No per-component overrides, no colour leaks.

02

Reskin via layout.md kits and brands

A layout.md kit from layout.design sets --layout-* values globally or under a data-brand attribute. The same Button, Card, and Badge components become Stripe-purple, Linear-indigo, or Notion-blue without touching the component code.

03

Rules agents can follow and validate

Every registry item carries structured meta rules: what it is for, what it must never do, and which tokens it touches. These rules power AI agent context (via layout.md + MCP) and automated compliance checks.