Installation

Registry setup

Add the Layout registry to your project's components.json so the shadcn CLI resolves @layout/* component references:

{
  "registries": {
    "@layout": "https://ui.layout.design/r/{name}.json"
  }
}

Installing components

Once the registry is configured, install any component with the shadcn add command:

npx shadcn add @layout/button

You can also use the direct registry URL form without configuring components.json first:

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

Install the theme alongside your first component to get the full token contract, including success, warning, shadow, and motion tokens that the shadcn default theme does not cover:

npx shadcn add @layout/theme-layout

Layout CLI

The Layout CLI (@layoutdesign/context) installs components with zero configuration: no components.json needed. It resolves component dependencies, installs npm packages with your package manager, and injects the theme variables. If your project has no Layout theme yet, the default theme is included automatically on first use.

npx @layoutdesign/context add button

Useful flags: --dry-run to preview, --overwrite to replace existing files, and --css to point at a specific stylesheet. The same package provides the MCP server that gives AI agents the design system context and compliance checks.

Framework guides

Choose your framework for a step-by-step setup guide, from project creation through installing your first Layout UI component.