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

Gemini CLI

PreviousNext

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

Gemini CLI 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, a remote server over Streamable HTTP, so there is nothing to run locally.

Connect ReUI

Add the ReUI MCP server

Add the reui server to ~/.gemini/settings.json (every project) or to .gemini/settings.json in the project (this project only), then restart Gemini CLI. Type /mcp inside the CLI to see the server and its status.

~/.gemini/settings.json
{
  "mcpServers": {
    "reui": {
      "httpUrl": "https://mcp.reui.io"
    }
  }
}

Gemini CLI uses httpUrl for Streamable HTTP servers (url means the older SSE transport, which the ReUI server does not serve). Environment variables in the form $NAME are expanded when the settings load.

Sign in with ReUI

The first time Gemini CLI calls a ReUI tool it prompts you to authorize the server; a browser window opens for the OAuth flow. Click "Sign in with ReUI" to complete it. If you do not have a ReUI account yet, a free one is created for you in that same 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 send it as an Authorization header instead:

~/.gemini/settings.json
{
  "mcpServers": {
    "reui": {
      "httpUrl": "https://mcp.reui.io",
      "headers": {
        "Authorization": "Bearer $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 session, so remove it when you want the browser sign-in back. A ReUI license key works in the same header for licensed installs.

Install the ReUI skill

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

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

For Gemini CLI it writes the skill to .agents/skills/reui, where Gemini CLI looks for workspace skills, and the reui server entry to .gemini/settings.json, so the first step above is done for this project too. If the project already has a GEMINI.md, it also adds ReUI's short design-rules block there, between <!-- BEGIN:reui-agent-rules --> and <!-- END:reui-agent-rules --> markers, and changes nothing outside them; it never creates that file. The same run writes the files of the other agents it supports, which do nothing if you do not use them; one of them, the reui entry in Codex's ~/.codex/config.toml, is in your home directory rather than the project.

Put REUI_AGENTS_MD=0 before node (curl -fsSL https://mcp.reui.io/install | REUI_AGENTS_MD=0 node -) to leave GEMINI.md and AGENTS.md alone, REUI_AGENTS_MD=remove to take the block back out, or REUI_DRY_RUN=1 to print every planned write without writing anything. REUI_GLOBAL=1 writes ~/.agents/skills/reui and ~/.gemini/settings.json instead.

Skip the install and the skill still reaches Gemini CLI through the MCP: ask it to call get_agent_skill for the core workflow and a list of topics, then ask for a topic (color, motion, layout, components) to read that reference in full. If a build drifts off-pattern, tell it to "follow the ReUI skill" to reload that workflow.

Build with ReUI

Describe the interface you want in plain language and Gemini CLI pulls the right ReUI components, examples and blocks from the registry, then wires them into your project. A few prompts to start with:

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
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 Gemini CLI install premium blocks and icons too, grab a Pro or Ultimate license and add the key to your project:

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. See License Setup for the full guide, including monorepos.

Troubleshooting

  • Tools missing or the server shows as disconnected - the connection did not finish. Check the config file for a typo in the URL, then restart Gemini CLI.
  • 401 after signing in through the browser - your ReUI session expired. Sign in to reui again from the MCP panel.
  • 401 with a personal token - the token has expired or been revoked. Signing in again will not help: create a new token at Account → MCP and update the header.
  • Sign-in works but every call still 401s - an Authorization header on the server entry overrides the browser session. Remove it, or make sure it carries a valid token.
AntigravityAlert

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