Skip to content
DocsSupportPricing
Roadmap (has updates coming soon)XFigma3.7K
Sign inGet All-Access
Overview
  • Introduction
  • Get Started
  • License Setup
  • Styling
  • Registry
  • MCP Server
  • Embed
  • Agent Skills
  • llms.txt
  • RTL
  • Changelogv2.8.1
  • YouTube
MCP Server
  • Claude
  • CodexCodexCodex
  • Cursor
  • Grok
  • Conductor
  • v0
  • Lovable
  • Replit
  • Bolt
  • OpenCode
  • VS Code
  • GitHub Copilot
  • Kilo Code
  • Zed
  • Antigravity
  • Gemini CLI
Components
  • Alert
  • Autocomplete
  • Badge
  • CascaderCascader keeps a saved selection's full path, popup open or closed
  • Code Block
  • Color Picker
  • Data GridData Grid works in apps that run React Compiler, with resizing, edits and callbacks kept live
  • Date SelectorDate Selector keeps its year list and Today button current in apps that run React Compiler
  • Emoji Picker
  • Event CalendarEvent Calendar keeps today and the agenda current in apps that run React Compiler
  • File TypeFile Type knows 171 formats, .env and Dockerfile included
  • File Upload
  • Filters
  • Frame
  • GanttGantt keeps its Today button and tooltip current in apps that run React Compiler
  • Icon Stack
  • Icon Tile
  • Kanban
  • Number Field
  • Phone Input
  • Rating
  • Scrollspy
  • Signature Pad
  • Sortable
  • Stepper
  • Time Picker
  • Timeline
  • Tree

Claude

PreviousNext

Connect the ReUI MCP server to Claude (Claude Code and Claude Desktop) and build UI from the ReUI registry by chat.

Set ReUI up in Claude once, then build UI from the entire ReUI registry just by chatting. Pick your Claude below - the two setups differ only in how you add the server. The endpoint is always the same URL, https://mcp.reui.io, over Streamable HTTP, the same one every agent uses - see MCP Server for the shared background.

Setup

Add the ReUI MCP server

From your project root, register the server over HTTP:

Terminal
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:

Slash command
/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. Claude Code discovers the sign-in from the WWW-Authenticate header ReUI returns, so there is nothing to configure.

You can also do this from your shell without opening a session:

Terminal
claude mcp login reui

Add --no-browser on a machine with no browser (an SSH session, for example) and Claude Code prints the authorization URL for you to open elsewhere, then asks you to paste the redirect URL back.

Confirm the connection

Check that Claude Code sees the server and its tools:

Terminal
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. No config files, no keys to paste.

Install the ReUI skill

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

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

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.

Add the ReUI connector

Open Settings → Connectors (on claude.ai it is Customize → Connectors), click +, and choose Add custom connector. The one field that matters is the Remote MCP server URL:

Connector settings
https://mcp.reui.io

Name it reui if a name is asked for, so it matches the troubleshooting steps below. On Team and Enterprise, an owner adds it once under Organization settings → Connectors and members then connect to it from Customize → Connectors.

Sign in with ReUI

Click Add, then click Connect and approve the "Sign in with ReUI" prompt in your browser. A free ReUI account is created in that flow if you do not have one.

Confirm the connection

The reui tools now appear in the chat toolbox. Open a new chat and you are ready to build - Claude uses the ReUI tools to search the registry and assemble components, and each tool carries its own usage guidance. There is nothing to install on Desktop.

The custom connector screen takes a URL and OAuth client credentials, not arbitrary request headers, so the personal-token path in Headless and CI is Claude Code only. On Desktop, browser sign-in is the way in.

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.

Prompt
Use ReUI to scaffold an admin app - the app-shell with a collapsible sidebar and top bar, and a dashboard page with stat cards and a chart.
Prompt
Add a data-grid of orders with sorting, column filters, pagination, and row selection, wired to my /api/orders endpoint.
Prompt
Build a multi-step "create project" wizard with the ReUI stepper and form components, with validation on each step.
Prompt
Add a kanban board for support tickets with drag and drop, grouped by status, and a filters bar above it.

Unlock premium items

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. Then add your key to the project - two quick steps:

Add your license key

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

.env.local
REUI_LICENSE_KEY=your-license-key-here

Add the @reui registry to components.json

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

${REUI_LICENSE_KEY} works in both files here, for two different reasons. The shadcn CLI expands it in components.json. Claude Code expands it as well: it substitutes ${VAR} and ${VAR:-default} in a server's url and headers in .mcp.json, which is why the ReUI installer writes Authorization: Bearer ${REUI_LICENSE_KEY} into your MCP config instead of the raw key. Keep the value in your environment either way - when the variable is unset, Claude Code warns about it in claude mcp list and sends the literal ${REUI_LICENSE_KEY} text, which ReUI rejects with a 401. Other agents use their own interpolation syntax, so this exact line does not carry over to a Cursor, OpenCode, or Zed config.

That is it - Claude can now install any premium item the MCP returns, and free items keep working through the same config. See License Setup for the full guide, or compare plans on the Pricing page.

Headless and CI

For Claude Code runs without a browser (CI, remote sessions), create a personal token at Account → MCP and pass it as a Bearer header instead of the browser sign-in:

Terminal
claude mcp add --transport http reui https://mcp.reui.io \
  --header "Authorization: Bearer reui_pat_your_token_here"

In a config you commit, keep the token in the environment and let Claude Code substitute it, exactly as the installer does:

.mcp.json
{
  "mcpServers": {
    "reui": {
      "type": "http",
      "url": "https://mcp.reui.io",
      "headers": {
        "Authorization": "Bearer ${REUI_MCP_TOKEN}"
      }
    }
  }
}

Once a header is set, that is the credential Claude Code uses. It will not fall back to the browser flow, so a bad or lapsed token shows up as a failed connection rather than a sign-in prompt.

Tokens expire after 90 days by default (30, 60, 90 and 180 are offered, plus No expiry for pipelines that cannot rotate). Nothing emails you beforehand, so an expired token simply starts returning 401 - create a fresh one at Account → MCP and update the header. Existing tokens keep whatever lifetime they were issued with.

Troubleshooting

Most hiccups are a stale browser sign-in, and reconnecting fixes them. The one exception is a personal token, which cannot be re-authenticated - it has to be replaced.

  • 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.
  • 401 and you sign in through your editor - your ReUI session expired. To fix it, run /mcp in Claude Code and re-authenticate reui (or toggle the connector off and on in Claude Desktop) to sign in again.
  • 401 and you use a personal token (headless or CI) - the token has expired or been revoked. Re-authenticating will not help: /mcp renews the browser sign-in, not the Authorization header your job sends, and Claude Code reports a rejected header as a failed connection rather than falling back to OAuth. Create a new token at Account → MCP and update the header or CI secret. The 401 body names which of the two it was.
  • Requests hang or the session drops mid-build - long sessions can lose the connection. To fix it, run /mcp in Claude Code and re-authenticate reui (or toggle the connector off and on in Claude Desktop) and retry your last prompt.
  • 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. For unlimited requests use a Pro or Ultimate license key, or a personal token from a licensed account, as your MCP credential, or wait for the reset.
  • Every ReUI call fails and nothing asks you to sign in - the stored OAuth connection is dead (revoked, expired, or invalidated after a suspicious reuse), and the client is silently retrying a credential that can never work again. Account → MCP shows the connection as Disconnected when this is the case. Reconnect the same way as the 401 fix above; retrying without signing in again cannot recover it.
YouTubeCodex

On This Page

SetupBuild with ReUIUnlock premium itemsHeadless and CITroubleshooting

Application

  • App Shell
  • Auth
  • Card
  • Dashboard
  • Dialog
  • Empty State
  • Event Calendar
  • Flow
  • Form
  • Gantt
  • Kanban Board
  • List
  • Navbar
  • Onboarding
  • Profile
  • Rich Text Editor
  • Schedule
  • Settings
  • Sheet
  • Stats2 meter cards moved here from Charts, 17 in all
  • Timeline
  • Whiteboard
  • Wizard

Data Grid

  • Base
  • AdvancedAdded 2 new Data Grid Advanced blocks, 5 in all
  • Columns
  • Drag & Drop
  • Editing
  • Expansion
  • Filtering
  • Grouping
  • Virtualization

Charts

  • Area ChartAdded a new Inbound Leads area chart block
  • Bar Chart
  • Composed Chart
  • Line Chart
  • Pie Chart
  • Radial Chart
  • Sankey ChartNew Sankey Chart category with 3 flow chart blocks
  • Slope ChartNew Slope Chart category with 2 rank-shift chart blocks
  • Sparkline
  • Status Tracker

AI & Agents

  • AI Chat
  • Agent Activity
  • AI UsageNew AI Usage category with 2 spend blocks

Solutions

  • Dev Ops
  • AI Ops
  • CRM
  • Agents
  • Analytics
  • Billing
  • Bookings
  • Files
  • Inventory
  • Users
  • Digital TwinNew Digital Twin category with 2 interactive 3D blocks

Templates

  • All templates

eCommerce

  • Category Card
  • Checkout
  • Comparison
  • Coupon
  • Filter Sidebar
  • Product Card
  • Product Detail
  • Product Grid
  • Receipt
  • Review
  • Shopping Cart
  • Wishlist
  • Shop Hero

Marketing

  • Blog
  • Compare
  • Contact
  • CTA
  • FAQ
  • Hero
  • How It Works
  • Pricing

Resources

  • Components
  • Blocks
  • Icons
  • MCP for Agents
  • Docs
  • Support
  • Pricing
  • Tailwind Plus Alternative
  • Roadmap(has updates coming soon)
  • AffiliateSoon

Legal

  • Privacy Policy
  • Terms & Conditions
  • License
  • Refunds
  • Cookies

© 2026 ReUI. All rights reserved.

3.7K