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

Codex

PreviousNext

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

Codex connects to ReUI in one step: point its CLI at the hosted ReUI MCP server, sign in once, and start building UI from the ReUI registry 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 server

Add the server with the Codex CLI:

Terminal
codex mcp add reui --url https://mcp.reui.io

Confirm the connection

Check that Codex registered the server:

Terminal
codex mcp list

You should see reui listed. The entry lands in ~/.codex/config.toml; a trusted project can scope it instead by putting the same table in .codex/config.toml. In the Codex TUI, /mcp shows the same list live.

Sign in with ReUI

Authorize the connection with a browser sign-in:

Terminal
codex mcp login reui

This opens a "Sign in with ReUI" prompt in your browser. Approve it to connect. If you do not have a ReUI account yet, a free one is created for you right there in the flow, so there is nothing to set up in advance.

For headless or CI runs where no browser is available, create a personal token at Account → MCP (it looks like reui_pat_...) and have Codex read it from an environment variable. Add the server with the token flag:

Terminal
codex mcp add reui --url https://mcp.reui.io \
  --bearer-token-env-var REUI_LICENSE_KEY

That writes the entry below, so the secret never lands in the config file. The ReUI installer produces the same shape, spelling the URL out as https://mcp.reui.io/api/mcp and adding the bearer_token_env_var line only when REUI_LICENSE_KEY is set in your environment as it runs:

~/.codex/config.toml
[mcp_servers.reui]
url = "https://mcp.reui.io"
bearer_token_env_var = "REUI_LICENSE_KEY"

Then export the value in your shell profile: export REUI_LICENSE_KEY=<your token or license key>. Codex also accepts http_headers for static headers and env_http_headers for headers sourced from the environment, but bearer_token_env_var is the shortest correct route. Whichever you use, do not paste the ${REUI_LICENSE_KEY} form from components.json into http_headers - the shadcn CLI expands that one, a static header does not, and it would reach the server as literal text and fail with a 401. A bearer token configured this way is an alternative to codex mcp login, not an addition to it. It is sent on every request and takes precedence over any stored OAuth credential, so leave it out entirely on the sign-in path - otherwise logging in appears to succeed while every call keeps failing.

Install the ReUI skill

Run the one-line installer so Codex follows ReUI's build workflow:

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

For Codex it writes 3 things: the skill to .agents/skills/reui in your project, the reui entry in ~/.codex/config.toml (always the global file, even in project mode; the project-scoped .codex/config.toml above is a manual setup), 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 AGENTS.md, which Codex reads as project instructions. With the skill in place, Codex knows how to discover blocks, assemble components, and wire them together the ReUI way instead of guessing, and it reads the deeper rules for color, theming, motion, and layout as it needs them.

The rules sit between <!-- BEGIN:reui-agent-rules --> and <!-- END:reui-agent-rules --> markers. Nothing outside the markers changes, so an existing AGENTS.md keeps your text and a re-run only refreshes the block. The installer creates AGENTS.md only when the project has no CLAUDE.md, .claude/CLAUDE.md or CLAUDE.local.md; otherwise it prints the block for you to paste. REUI_AGENTS_MD changes that:

  • REUI_AGENTS_MD=0 writes no AGENTS.md (or GEMINI.md).
  • REUI_AGENTS_MD=create creates AGENTS.md even beside a CLAUDE.md. Combined with REUI_GLOBAL=1, it opts in to ~/.codex/AGENTS.md instead, which every Codex session on your machine reads.
  • REUI_AGENTS_MD=remove takes the ReUI block out of AGENTS.md and GEMINI.md (with REUI_GLOBAL=1, out of ~/.codex/AGENTS.md) and writes nothing else. Every install prints this command for you.
Terminal
curl -fsSL https://mcp.reui.io/install | REUI_AGENTS_MD=remove node -

With REUI_GLOBAL=1 the skill goes to ~/.agents/skills/reui and no AGENTS.md is written unless you opt in as above. 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 Codex 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 Codex 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 ${REUI_LICENSE_KEY} reference belongs here, where the shadcn CLI expands it from .env.local. Codex has no equivalent placeholder syntax in config.toml, so the MCP server entry names the variable instead, with bearer_token_env_var or env_http_headers as shown above.

That is it - Codex 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. 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 codex mcp login reui, then restart Codex. /mcp in the TUI shows which servers still need authorizing.
  • 401 and you signed in through the browser - your ReUI session expired. To fix it, run codex mcp login reui to sign in again.
  • 401 and you use a personal token (headless or CI) - the token has expired or been revoked. codex mcp login will not help, because it renews the stored OAuth credential, not the bearer token your job sends. Create a new token at Account → MCP and update the environment variable 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 codex mcp login reui and retry your last prompt.
  • Sign-in appears to work but every call still 401s - check whether you have a bearer_token_env_var, http_headers, or env_http_headers line on the reui server in config.toml. A configured credential is sent on every request and overrides the OAuth credential the sign-in stores, so while it is there running codex mcp login 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 Codex 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.
ClaudeCursor

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