Layout UI

Layout UI is Layout's own component system: 54 components built on a shared token contract, so every button, card, and dialog reads your design system's tokens automatically instead of shipping with hardcoded colours and spacing. It lives at ui.layout.design, a separate site from Studio, and it works both in Layout projects and in any stock shadcn project.

Open Layout UI

Installing components

Install any component with the Layout CLI. The first component you add automatically installs the matching theme for your project, so the colours and radii are correct from the first import:

bash

npx @layoutdesign/context add button

The CLI resolves and installs any dependent components for you, detects npm, pnpm, yarn, or bun automatically, and writes files straight into your project. Useful flags:

Flag	What it does
--registry	Use a different component registry URL
--dir	Install into a specific directory instead of the detected components path
--css	Choose the CSS output target (globals.css by default)
--overwrite	Replace an existing component file instead of skipping it
--dry-run	Print what would be installed without writing any files

Installing with the shadcn CLI

Layout UI is also a standard shadcn registry, so it works with the stock shadcn CLI if that is already part of your workflow:

bash

npx shadcn add @layout/button

That resolves against ui.layout.design/r/{name}.json. You can also point at that URL directly, without the @layout namespace configured:

bash

npx shadcn add https://ui.layout.design/r/button.json

Every gallery kit is a theme

Every kit in the Kit Gallery is also published as a shadcn registry:theme item, compiled on request from the kit's style profile. Install the Stripe-style kit as a theme, for example:

bash

npx shadcn add https://layout.design/r/stripe/theme.json

The same theme file works in a stock shadcn project (it emits shadcn's standard CSS variable names) and in a Layout UI project (it also emits the --layout-* extensions Layout UI components read for success/warning states and shadows), so one command re-skins either kind of project to match that kit's brand.

Theme URLs follow layout.design/r/<slug>/theme.json, where <slug> is any published kit's slug from the gallery. Themes stay in sync automatically: re-running the install command after a kit is updated pulls the latest tokens.

Built for AI agents

Every one of the 54 components carries its own compliance rules rather than relying on prose an agent might skim past. Each registry item includes a meta block with three fields:

Field	What it tells the agent
meta.usage	When and how to use this component correctly, in plain language
meta.never	Anti-patterns to avoid: variants not to mix, props not to combine
meta.tokens	Which design tokens the component consumes, so an agent knows not to hardcode them

The full catalogue is also published as an llms.txt file at the Layout UI site, so any agent that reads that convention can discover the component list, install commands, and rules without you pasting anything into a prompt.

Combined with the Layout MCP server's check_compliance tool, an agent can both install a Layout UI component on-brand and verify any code it hand-writes against the same rules.

Building without leaving the browser

The /create builder on the Layout UI site lets you assemble screens from the component set and a chosen theme directly in the browser, then copy the generated code out or install it with the CLI commands above.

Next steps

Layout UI docs — the full component reference, props, and examples.
CLI & MCP Server — the rest of the @layoutdesign/context toolset, including check_compliance.
Kit Gallery — browse every kit publishable as a Layout UI theme.