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

Cursor

PreviousNext

Connect the ReUI MCP server to Cursor and build UI from the ReUI registry by chat.

Cursor connects to ReUI in two quick steps: point it at the hosted MCP server, then sign in and start building UI by chat. The endpoint is https://mcp.reui.io over Streamable HTTP, the same one every agent uses - see MCP Server for the shared background.

Connect ReUI

Add the ReUI MCP server

Add the reui server to Cursor in one click. Cursor opens, shows the server, and asks you to confirm - approve it, then reload.

Add to Cursor

Prefer to set it up by hand? Add ReUI to .cursor/mcp.json in your project, then reload Cursor:

.cursor/mcp.json
{
  "mcpServers": {
    "reui": {
      "url": "https://mcp.reui.io"
    }
  }
}

A remote server needs no type field - Cursor infers Streamable HTTP from url. Use ~/.cursor/mcp.json instead to make ReUI available in every project.

The ReUI installer writes the same entry into .cursor/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

The first time Cursor calls a ReUI tool, a browser window opens to authorize the connection. Click "Sign in with ReUI" to complete the OAuth prompt. If you do not have an account yet, a free ReUI account is created for you right in that flow, so there is nothing to set up in advance.

For headless or CI use where no browser is available, create a personal token at Account → MCP and add it as an Authorization header on the same server entry. Cursor interpolates ${env:NAME} inside headers, so keep the token in your environment rather than in the file. The ReUI installer writes this same header shape, but only when REUI_LICENSE_KEY is set in your environment as it runs; a keyless install leaves the entry headerless:

.cursor/mcp.json
{
  "mcpServers": {
    "reui": {
      "url": "https://mcp.reui.io",
      "headers": {
        "Authorization": "Bearer ${env:REUI_LICENSE_KEY}"
      }
    }
  }
}

This header is an alternative to the browser sign-in, not an addition to it. It is sent on every request and takes precedence over any OAuth credential the client has stored, so leave it out entirely on the sign-in path - otherwise authenticating appears to succeed while every call keeps failing.

Then export REUI_LICENSE_KEY=<your token or license key> in your shell profile. Pasting the literal reui_pat_... value works too, but only do that in a file you are not committing.

Install the ReUI skill

Run the one-line installer in your project so Cursor follows ReUI's build workflow:

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

For Cursor it writes the skill to .cursor/skills/reui, the reui entry to .cursor/mcp.json, and ReUI's design rules (installed components first, semantic color tokens, the spacing ladder, type sizes, motion values, empty, loading and error states, a short UI plan before code, and the skill's self-check before finishing) to .cursor/rules/reui.mdc as an always-applied rule. Cursor reads the skill to learn how ReUI wants components discovered, assembled, and wired, so its output stays on the ReUI registry instead of freehand markup, and the rule brings the design rules into every chat. The installer owns reui.mdc and replaces it on each run, so keep your own rules in a separate file.

With REUI_GLOBAL=1 the installer writes Cursor's MCP entry to ~/.cursor/mcp.json instead, so ReUI is available in every project; .cursor/skills/reui and the rule are written in project mode only. In either mode the run also writes the files of the other agents it supports, including a reui entry in ~/.codex/config.toml in your home directory.

The same run also puts the design rules into AGENTS.md, between <!-- BEGIN:reui-agent-rules --> and <!-- END:reui-agent-rules --> markers, and changes nothing outside them. It creates AGENTS.md only when the project has no CLAUDE.md, .claude/CLAUDE.md or CLAUDE.local.md. REUI_AGENTS_MD=0 skips that write, REUI_AGENTS_MD=create creates the file even beside a CLAUDE.md, and REUI_AGENTS_MD=remove takes the block out of AGENTS.md and GEMINI.md and writes nothing else (every install prints that command). REUI_AGENTS_MD does not cover .cursor/rules/reui.mdc: every project install writes it, and remove leaves it in place. To see every file a run would touch first, add REUI_DRY_RUN=1: it prints each planned write and writes nothing.

Build with ReUI

Describe the interface you want in plain language and Cursor 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 Cursor 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}"
      }
    }
  }
}

The shadcn CLI expands ${REUI_LICENSE_KEY} from your environment, so leave it as a variable here. Cursor has its own syntax and only understands the env: prefix, so the MCP server entry above uses ${env:REUI_LICENSE_KEY}. Copying this bare ${REUI_LICENSE_KEY} form into .cursor/mcp.json sends it to ReUI as literal text and fails with a 401.

That is it - Cursor 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.

Troubleshooting

Most hiccups are a stale browser sign-in, and reconnecting fixes them. Cursor's MCP servers live under Customize in the sidebar, which is where you toggle, re-authorize, or remove reui. 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, open Customize, sign in to reui again, then restart Cursor.
  • 401 and you signed in through the browser - your ReUI session expired. To fix it, open Customize and sign in to reui again.
  • 401 and you use a personal token (headless or CI) - the token has expired or been revoked. Signing in again will not help: that renews a browser session, not the Authorization header your config sends. Create a new token at Account → MCP and update the header or the environment variable it reads. 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, open Customize, sign in to reui again, and retry your last prompt. For the underlying error, open the Output panel and select MCP Logs.
  • Sign-in appears to work but every call still 401s - check whether you have an Authorization header on the reui server entry. A configured credential is sent on every request and overrides the OAuth credential the sign-in stores, so while it is there opening Customize and signing in to reui again 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 Cursor 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.
CodexGrok

On This Page

Connect ReUIInstall the ReUI skillBuild with ReUIUnlock premium itemsTroubleshooting

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