About Layro
Layro is a React and Tailwind CSS component library accessed by coding agents through a remote MCP server. It provides component search, prop and usage details, and installation; search and details do not require an account, but installation requires a token.
Key features
- 01Search the React component library
- 02Read component props and usage
- 03Install tested components
- 04Pin package versions during installation
Use cases
- 01Find ready-made components for a frontend
- 02Check a component's props and usage
- 03Install a component into a project
MCP support
Layro's remote MCP server gives MCP clients access to component search, details, and installation. A Layro token is required to install components.
Configuration
Remote servers need no local install. Pick your client, then copy the config or install in one click.
https://layropro.com/api/mcpclaude mcp add --transport http layro https://layropro.com/api/mcp{"mcpServers":{"layro":{"type":"http","url":"https://layropro.com/api/mcp"}}}Open in Cursor{"servers":{"layro":{"type":"http","url":"https://layropro.com/api/mcp"}}}Open in VS Code{"mcpServers":{"layro":{"type":"http","url":"https://layropro.com/api/mcp"}}}{"mcpServers":{"layro":{"serverUrl":"https://layropro.com/api/mcp"}}}Run commands in a terminal; paste JSON into the client’s MCP config and restart. Servers that need sign-in will prompt on first connect.
https://layropro.com/api/mcpAuth requiredTools
8| Parameter | Type | Required | Description |
|---|---|---|---|
| limit | integer | No | How many results. Default 8. |
| query | string | Yes | What you need, in plain words: "animated dashboard card", "date range picker". |
| category | string | No | Only this category (name or slug from list_categories). |
Details
From the project READMELayro MCP
Layro is a library of 112 production React UI components written in TypeScript and styled with Tailwind CSS (62 free). Its remote MCP server gives Cursor, Claude Code, VS Code, Windsurf, Codex and other MCP clients access to the whole library. Your agent can search the library, read each component's props and usage, and install the tested component with pinned packages.
Install
Add to ~/.cursor/mcp.json (or .cursor/mcp.json in a project):
{
"mcpServers": {
"layro": { "url": "https://layropro.com/api/mcp" }
}
}
Search and component details work with no account. To install components, add the CLI token from https://layropro.com/account. A free account's token unlocks the 62 free components; lifetime access unlocks Pro:
{
"mcpServers": {
"layro": {
"url": "https://layropro.com/api/mcp",
"headers": { "Authorization": "Bearer YOUR_LAYRO_TOKEN" }
}
}
}
Docs: https://layropro.com/mcp
Comments
New to MCP?
From what the protocol is to installing your first server, these answers cover most first questions.
An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.