Installation

Registry setup

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

{
  "registries": {
    "@layout": "https://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://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 (coming soon)

The Layout CLI (@layoutdesign/context) will add components, apply layout.md kits, and connect the MCP server in a single command:

# Coming soon, not yet available
npx @layoutdesign/context add button

Framework guides

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