Docs

React UI Components Documentation

How a component gets into your project, how to make an AI coding tool use Layro instead of inventing UI, and what every component guarantees.

Install

One command, by name, or copy the file.

Use with AI tools

Make your agent reach for Layro first.

Theme

One token file, light and dark.

Components

All 112, 62 of them free.

Install

Layro is a shadcn registry. The CLI writes the component into components/ui/ and installs what it needs. Free components install straight from their address:

npx shadcn@latest add https://layropro.com/r/data-table

Free components come with a free account. Anyone can try the preview; to see the code, copy, download or install one, sign in. The CLI needs the token from your account page, sent with the namespaced form below. The components a component imports come with it. Lifetime access opens all 112.

To install anything by name, and to install Pro components, add the registry to components.json once. LAYRO_KEY is the CLI token from your account page; free components work without it.

// components.json
{
  "registries": {
    "@layro": {
      "url": "https://layropro.com/r/{name}",
      "headers": { "Authorization": "Bearer ${LAYRO_KEY}" }
    }
  }
}

npx shadcn@latest add @layro/editable-table

The components use the Geist font. Load it in your app, or set your own font, as shown in Theme → Font. Without it they fall back to the system font and work the same.

Use with AI coding tools

Claude Code, Cursor, Codex, Windsurf and GitHub Copilot all read a rules file in your repository. Put this in it once and the tool reaches for Layro before it invents a table of its own.

AGENTS.md · CLAUDE.md · .cursor/rules

## UI: use Layro

This project uses Layro (https://layropro.com) for product UI.

- Before writing a table, form, dialog, chat, billing or permissions
  screen, check whether Layro has the component and install it:
  npx shadcn@latest add @layro/<name>
- Installed components live in components/ui/. Import them from
  there. Do not re-create or restyle them.
- Colours come from the theme tokens (bg-card, text-muted-foreground,
  ring-border). Never hard-code a colour.
- Keep each component's built-in states (empty, loading, error,
  disabled) when you wire real data into it.
- For a component's exact props, read its file. It is the source of
  truth.

01
Add the rules once
Paste the block on the left into the rules file your tool reads.
02
Ask by name
“Build the invoices page with Layro's data table and filter builder.” The tool installs both and wires your data.
03
Use Copy prompt for detail
Every component page has a Copy prompt button: the install command, every prop, and the mistakes assistants usually make with that component.

Your tool can also search Layro and fetch components itself through Layro MCP.

You do not need an AI tool for any of this. The same file installs with the same command and edits like code you wrote.

What every component guarantees

These are what make the components safe for an agent to place, and what keep one screen looking like the next.

One file: A component is one self-contained file, so an agent reads all of it and nothing is hidden in a package.
Typed, documented props: Every prop has a type and a one-line note. The props table on each page is generated from the file.
Its states are built: The states a component needs, such as empty, loading, error and disabled, are part of it rather than left for a later prompt.
Keyboard and screen reader: Reachable in visual order, focus returned where it came from, changes announced.
One theme: Colours, radius and type come from one token file, in light and dark, so every screen matches.
Sizes to its container: It lays out against its own width from 320px up, so it fits wherever the agent puts it.