UI Registry — Claude Code MCP server: what it does and how to install
Connects coding agents to 12 shadcn-style component libraries. Lets models search roughly 3,700 real UI blocks, compare variants, and check design consistency.
claude mcp add ui-registry-mcp -- npx -y ui-registry-mcpWhat UI Registry does
Instead of letting an assistant invent generic UI cards from memory, this server links your editor to live registries containing around 3,700 ready-to-use blocks. It connects to 12 libraries including ReUI, Watermelon UI, Aceternity UI, Tailark, and Kibo UI. It does not rely on outdated mirrors. Every query fetches current code straight from registry endpoints, retaining a short in-memory cache for speed.
Six tools handle the workflow: list_registries, search_components, compare_components, get_component, check_consistency, and list_components. An agent can inspect alternatives side-by-side, grab the exact npx shadcn add snippet, and spot styling mismatches. The consistency check scans for hardcoded palette values like zinc-900, mismatched corner radii, or missing dark mode classes.
Certain sources mix paid items into their public catalog. Using the verified flag during searches is essential to bypass locked assets that would otherwise fail during installation.
What it helps with
- find ready-made UI components across 12 shadcn-compatible registries
- compare multiple implementations of a widget side by side
- detect styling drift and hardcoded colors across imported blocks
- pull complete component files with proper shadcn installation commands
Example prompts for the agent
- Build a pricing section by comparing components across available registries.
- Insert a data table and verify that its spacing matches the top card.
- Search for verified modal components with dark theme support.
How to install UI Registry
Platform CLI
claude mcp add ui-registry-mcp -- npx -y ui-registry-mcpPlatform CLI
codex mcp add ui-registry -- npx -y ui-registry-mcpConfig file
{
"mcpServers": {
"ui-registry": {
"command": "npx",
"args": [
"-y",
"ui-registry-mcp"
]
}
}
}Config file
{
"servers": {
"ui-registry": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"ui-registry-mcp"
]
}
}
}Platform CLI
gemini mcp add ui-registry npx -y ui-registry-mcpStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about UI Registry
How to install UI Registry in Claude Code?
Run claude mcp add ui-registry -- npx -y ui-registry-mcp in your terminal. This registers the server package via npx without manual cloning.
What does UI Registry do?
It allows your coding agent to search, inspect, and import real components from 12 open-source UI libraries. The agent pulls verified code and ensures new components match your theme.
How does it handle premium components?
The server flags commercial entries found in catalogs like ReUI or Aceternity. Filtering by verified ensures the agent only selects freely installable open-source components.
