Layro MCP

npx add-mcp 'https://layropro.com/api/mcp'

Stop prompting AI to rebuild your UI.

233 production-ready React components for AI products. Your agent installs them through MCP, so you stop burning credits on spacing, states and dark mode.

Free components with full source. A free account, no card.

Example component

Waiting for your AI tool

Example component

Waiting for your AI tool

Example component

Waiting for your AI tool

Layro MCP connected

Add an AI assistant that asks before it acts.

layro·search_components("ai chat approvals")

→ 49 components found

layro·get_component_code("ai-chat")

→ installed AI Chat

layro·get_component_code("approval-request")

→ installed Approval Request

Done. Both components are in components/ui, wired into the page, light and dark.

1 prompt · 0 fix-up roundsReady to ship

Example component

Waiting for your AI tool

Example component

Waiting for your AI tool

Example component

Waiting for your AI tool

Find Layro MCP on

• Official MCP Registry
• mcp.so
• Cursor Directory

Why Layro

Stop paying credits to fix UI.

Building a product with Claude Code, Cursor or Codex? Each screen usually costs 1 to 2 hours of prompting, tweaking and rebuilding, and up to 6× the credits it should. With Layro MCP your agent calls a ready-made, well-designed component and puts it straight into your product.

Credit calculator

Calculate what you save.

Every “fix the spacing”, “wrong colour”, “smaller heading” is another agent round, and another round of credits. With Layro MCP your agent starts from a finished component.

30

5150

6 rounds

Spacing, colour, type, states, dark mode…

2 rounds15 rounds

Model tier

Most everyday coding models · $3 / $15 per million tokens

What you spend in 30 days

Without Layro180 rounds$25.65 · 12 h

With Layro MCP30 rounds$4.28 · 2.0 h

Time you get back in 30 days

10 h

plus $21.37 in credits

Tokens saved in 30 days

5.6M

Layro Lifetime

$99 $149 once

Estimate only. Assumes about 35K tokens in and 2.5K out per agent round at typical API rates for the tier, and 4 minutes a round. On Cursor, Copilot or a Claude plan, the same tokens come out of your usage limits.

Prompting UI from scratch

1. 1Prompt the screen
2. 2Fix the spacing
3. 3Fix the colours and type
4. 4Add hover, focus, loading states
5. 5Make dark mode work
6. 6Fix what that broke

About 6 rounds and 1 to 2 hours per screen

With Layro MCP

1. 1Ask for the screen
2. 2Your agent calls Layro MCP
3. 3A finished component lands in your code

1 round, the component arrives finished

Compare

Same screen. Every detail finished.

Left: what a prompt to an AI builder usually gives you. Right: the same screen from Layro, running, with real states, spacing and motion. Drag the handle.

app.vertically.com/home

Layro MCP

How Layro works with your AI tool New

Connect once. Claude Code, Cursor, VS Code, Codex and other MCP tools can then search every Layro component, read its props and install the right one into your project, instead of writing it from scratch.

1 · Connect once

claude mcp add --transport http layro https://layropro.com/api/mcp

2 · Ask for what you need

Build a billing page with Layro components.

Claude CodeCursorVS CodeCodexWindsurfGemini CLIAntigravity

Connect MCP

In your AI tool

New

1. YouAdd a date range picker to the settings page.
2. MCPsearch_components("date range picker") → date-picker
3. MCPget_installation(date-picker) → npx shadcn@latest add @layro/date-picker
4. AIInstalled Layro's Date Picker in components/ui and wired it to your form, range mode on.

All 233 components, with props, packages and usage. Free ones need a free account's token; Pro ones need lifetime access.

Components

Every product screen, already built.

Production-ready React and Tailwind UI components for AI chat, agents, dashboards, tables, billing, permissions, and more. Accessible, light and dark, and ready to paste.

[

AI Chat20 components

A chat window, streaming answers, prompt box and conversation history.

](https://layropro.com/components/category/ai-chat)[

AI Agent29 components

Run status, plans, tool calls, approvals, history and a full agent workspace.

](https://layropro.com/components/category/ai-agent)[

Data Tables15 components

Editable cells, filter builder, saved views and CSV import.

](https://layropro.com/components/category/data-tables)[

Documents10 components

Viewers, signing flows, audit trails and version history.

](https://layropro.com/components/category/documents)[

Workspace16 components

Members, roles, permissions and access requests.

](https://layropro.com/components/category/workspace)[

Billing11 components

Plans, invoices, payment methods and usage.

](https://layropro.com/components/category/billing)[

Productivity2 components

A kanban board and a notification panel.

](https://layropro.com/components/category/productivity)[

Data & feedback32 components

Tables, charts, badges and the states between them.

](https://layropro.com/components/category/data-and-feedback)[

Forms21 components

Fields, inputs, selects and pickers on one control scale.

](https://layropro.com/components/category/forms)[

Overlays9 components

Dialogs, drawers, popovers, menus and a command palette.

](https://layropro.com/components/category/overlays)[

Auth3 components

Sign in, sign up, one-time codes and password strength.

](https://layropro.com/components/category/auth)

Templates

Complete applications, ready to make yours.

Production-ready React and Next.js templates for dashboards, SaaS products, and modern web applications. Open the live demo before you buy.

Settle: Payment Operations

Dashboard template · 8 screens

Included

Eight screens for the team that closes the day: settlement, reconciliation, payouts and disputes.

AetherFlow: SaaS Landing Page

Landing page template · 9 sections

Included

A complete landing page for a creative-collaboration SaaS: hero with a working product mockup, features, workflow, pricing and testimonials.

How it works

From prompt to production in three steps.

Through your AI tool or by hand. No wrappers and no runtime: just the source in your repository, ready to edit.

1. Ask or install

   Tell your AI tool which component you want, or run one command yourself. The shadcn CLI writes the file into your project and installs what it needs.

   npx shadcn@latest add @layro/data-table
   

2. Compose

   One file, typed props, your theme's colours. Your agent reads the props and wires your data; you restyle it with Tailwind like any code you wrote.

   <DataTable columns={columns} data={rows} />
   

3. Ship

   Keyboard support, screen-reader labels, light and dark are already done. Nothing phones home.

   npm run build
   

Pricing

Start free. Pay once for all of it.

80 components are free with an account, so you can judge Layro in your own project first. Pro is one payment for all 233 components at once, every template and each future release.

Free

$0

80 components, free with an account.

Browse free components

Start here:

• 80 components with their full source
• Copy or install as many as you like
• Try every preview, any time
• A free account, no card
• Install with the shadcn CLI, or copy the file
• The same code quality, states and accessibility as Pro

Pro · Lifetime access

$99$149

One-time payment. Every future release included. No subscription.

Get lifetime access

Try 80 free components in your own project first. Because you can test before you buy, all Pro sales are final.

Already bought? Sign in

What you get:

• All 233 components: the 80 free ones and 153 Pro
• Access to all 2 templates
• Everything open at once, with no daily limit
• Lifetime access to all components and upcoming updates
• One command to install with the shadcn CLI
• Built for AI coding tools: Claude Code, Cursor, Codex and more
• Support by email from the person who wrote the code
• Built with React, TypeScript and Tailwind CSS v4

The founder

Built by Uvain

I’ve spent years designing components and design systems. Now developers and vibe coders can ship a whole product with AI in a weekend, but the UI often looks unfinished: off spacing, missing states, broken dark mode.

I built Layro for builders who move fast but still care about quality. Every component has its states, spacing, dark mode and accessibility designed before it ships, so your agent installs something you’re proud to show.

Questions? Hover the icons to reach me on X or by email.

FAQ

Frequently asked questions

Everything worth knowing before you buy.

(01)What do I get when I buy?

Every component on this site with its source, every template, and everything released after you buy. You sign in, pay once, and your account is unlocked: copy the code from any component page, install it with the shadcn CLI, or download the files.

(02)What is free, and what is Pro?

80 components are free, with their full source. Anyone can try the previews; to see the code, copy, download or install one, sign in with a free account. Pro is one payment for all 233: the other 153 components (the AI agent, data table, documents, billing and workspace sets), every template, and everything released later.

(03)Who is it for?

Developers who build with AI coding tools such as Claude Code, Cursor, Codex, Windsurf or GitHub Copilot, and want every screen the tool produces to look and behave like one product. Indie hackers and small teams shipping a SaaS, an AI product or an internal tool use it the same way.

(04)Do I need an AI tool to use Layro?

No. Every component is plain React and TypeScript source in your own repository. Install it with one command or copy the file, and edit it like code you wrote. It is designed so that an AI tool uses it well, not so that it needs one.

(05)What kind of apps can I build?

Anything in React with Tailwind CSS v4: Next.js, Vite, Remix. Use the components in unlimited personal and commercial projects, including client work. The one thing you may not do is resell or republish the source itself.

(06)Is this a subscription?

No. It is one payment. There is nothing to renew and nothing to cancel, and the code you have taken stays yours.

(07)Do the components work with Claude Code, Cursor and other AI agents?

Yes, that is what they are built for. Every component is one self-contained file with typed props and documented states, so an agent can read it and place it without guessing. Each page has a Copy prompt button with the install command, the props and the mistakes assistants usually make, and the registry installs any component by name.

(08)Do you offer refunds?

Pro sales are final, because the source code stays with you once it is downloaded. That is why 80 components are free: install them in your real project, check the code quality, and buy Pro only when you are sure. If you are charged twice or cannot access Pro, email me and I will fix it the same day.

(09)How do I get help?

Write to layropro26@gmail.com. One person builds Layro and answers the mail, so a reply can take a day, but it comes from the person who wrote the code.