How to Use the ReUI shadcn Registry and MCP with Claude Code

The ReUI MCP server connects your coding agent to the live ReUI registry. Through one endpoint your agent searches the full library with scored, intent-based matching, reads real component APIs, and gets exact shadcn CLI install commands - so it ships real ReUI instead of guessing.

Prerequisites

ReUI is built on the latest React 19 and Tailwind CSS v4. Ensure your project is set up with these technologies before proceeding.

We recommend following the Official shadcn/ui Installation Guide and shadcn/create setup to prepare your environment.

Registry

The ReUI Registry serves every ReUI item from a single @reui namespace: free primitives and c-* components, paid blocks and paid icons. The shadcn CLI resolves the full alias suffix into the registry URL, so ReUI items install as @reui/<name> and ReUI handles access rules on the server.

Add the ReUI registry namespace to your components.json.

{
  "registries": {
    "@reui": "https://reui.io/r/{style}/{name}.json"
  }
}

There is no ReUI npm package to install. Running npm i @reui/data-grid asks npm's own @reui scope, which belongs to an unrelated publisher, so it either fails or installs a package that is not ours.

Free Components

Free component examples use the c-* naming pattern and can be installed without a license key.

npx shadcn@latest add @reui/c-alert-1

Claude Code (CLI)

Add the ReUI MCP server

From your project root, register the server over HTTP:

claude mcp add --transport http reui https://mcp.reui.io

The ReUI installer writes the same server into .mcp.json, spelling the URL out in full as https://mcp.reui.io/api/mcp. The short form above rewrites to it, so both resolve to the same server and you can use whichever you prefer.

Sign in with ReUI

Open the MCP menu inside Claude Code:

/mcp

Select reui and follow the steps in your browser to approve the "Sign in with ReUI" prompt. A free ReUI account is created in that flow if you do not have one.

Confirm the connection

Check that Claude Code sees the server and its tools:

claude mcp list

reui should report ✔ Connected. ! Needs authentication means the sign-in did not finish, and ✘ Failed to connect means Claude Code could not reach the server at all.

Install the ReUI skill

This drops the ReUI skill into .claude/skills/reui so Claude knows how to search the registry, read the real component APIs, and wire blocks together the ReUI way instead of guessing. The same run adds the reui server to .mcp.json, adds ReUI's design rules to AGENTS.md (never created beside a CLAUDE.md), and writes the skill and MCP entry of the other agents it supports, including a reui entry in ~/.codex/config.toml in your home directory. Add REUI_DRY_RUN=1 before node to see every planned write first.

Run the one-line installer from your project root so Claude Code follows the ReUI build workflow:

curl -fsSL https://mcp.reui.io/install | node -

Build with ReUI

Describe the interface you want in plain language and Claude pulls the right ReUI components, examples, and blocks from the registry, then wires them into your project.

A free ReUI account covers the free catalog in full - the 27 ReUI components and every c-* example - across every tool, from search and compose_page to the install command for each one.

Add a kanban board for support tickets with drag and drop, grouped by status, and a filters bar above it.

Add a data-grid of orders with sorting, column filters, pagination, and row selection, wired to my /api/orders endpoint.

Unlock premium items

Premium blocks and icons use the same @reui namespace, but they require a valid license key.

Free items (the 27 components and every c-* example) install with no license. To let Claude install premium blocks and icons too, grab a Pro or Ultimate license - one license unlocks the whole premium registry and removes the daily MCP request limit.

Copy your key from Account → Licenses into .env.local at the project root:

REUI_LICENSE_KEY=your-license-key

Change the registry entry to the authenticated object form.

{
  "registries": {
    "@reui": {
      "url": "https://reui.io/r/{style}/{name}.json",
      "headers": {
        "Authorization": "Bearer ${REUI_LICENSE_KEY}"
      }
    }
  }
}

Free items keep working with the authenticated config too, so you do not need a second registry namespace.

Plans and limits

Free accounts get a daily request allowance, shown on your ReUI account page. Your exact figure and today's usage are on Account → MCP, which is the only place either number is right for your account.

Troubleshooting

• Tools missing, greyed out, or "not connected" - the server did not finish connecting. To fix it, run /mcp in Claude Code and re-authenticate reui (or toggle the connector off and on in Claude Desktop), then restart Claude.
• Sign-in appears to work but every call still 401s - check whether you have an Authorization header on the reui entry in .mcp.json. A configured credential is sent on every request and overrides the OAuth credential the sign-in stores, so while it is there running /mcp and re-authenticating reui cannot take effect. The two are alternatives, not layers: use the header only on the headless path, and remove it if you want the browser sign-in.
• "Your free ReUI MCP allowance ... is used up" in a tool result - the free plan has a daily MCP request allowance and today's is used up. It arrives as a normal tool result Claude shows you, not an HTTP error, so there is no status code to look for, and it resets at UTC midnight.

Set up ReUI MCP