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

Posted on Nov 5 • Originally published at faizalsukaimi.hashnode.dev

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.

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.

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" } } Enter fullscreen mode Exit fullscreen mode 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 component examples use the c-* naming pattern and can be installed without a license key.

npx shadcn@latest add @reui/c-alert-1 Enter fullscreen mode Exit fullscreen mode 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 Enter fullscreen mode Exit fullscreen mode 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.

/mcp Enter fullscreen mode Exit fullscreen mode 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.

Check that Claude Code sees the server and its tools:

claude mcp list Enter fullscreen mode Exit fullscreen mode 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.

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 - Enter fullscreen mode Exit fullscreen mode 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. Enter fullscreen mode Exit fullscreen mode Add a data-grid of orders with sorting, column filters, pagination, and row selection, wired to my /api/orders endpoint. Enter fullscreen mode Exit fullscreen mode 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 Enter fullscreen mode Exit fullscreen mode 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}" } } } } Enter fullscreen mode Exit fullscreen mode Free items keep working with the authenticated config too, so you do not need a second registry namespace.

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.