# UI Beats

Searches the UI Beats catalog for animated React components, reads their props, and retrieves shadcn install commands directly inside coding agents.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 234
- Author: nikhils4
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/nikhils4/ui-beats/tree/HEAD/packages/mcp
- Updated: 2026-08-23
- HTML: https://affpapa.org/en/nevibecode/mcp/ui-beats

## What it does

The server gives your coding assistant access to animated React components. Instead of browsing a website manually, the assistant searches items with natural language queries and inspects prop definitions alongside raw source files. When you choose a component, the server outputs the exact `shadcn` command with any required npm packages.

There is no separate backend. The tool acts as a client reading two static files hosted on the main site. Catalog data stays in memory for ten minutes, keeping an older copy in reserve whenever network requests fail.

Working on the component site offline requires the `UIBEATS_URL` environment variable. Point it to a local development address if you want the server to bypass production endpoints.

## Requirements
- Needs: Node.js (commands run via npx)

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add mcp -- npx -y @uibeats/mcp
```

### Codex

**Platform CLI**
```bash
codex mcp add mcp -- npx -y @uibeats/mcp
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "mcp": {
            "command": "npx",
            "args": [
                "-y",
                "@uibeats/mcp"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "mcp": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "@uibeats/mcp"
            ]
        }
    }
}
```

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add mcp npx -y @uibeats/mcp
```

## When to use it
- Locate animated React UI elements using plain queries
- Inspect component props and full source without leaving the editor
- Obtain exact `shadcn` setup commands and required dependencies
- Browse the component library grouped into layout categories

## Example prompts
- Search UI Beats for an animated flip card and show its props
- Get the install command and dependencies for the `flip-card` component
- List all available UI Beats components organized by category

## Similar
- [Front-End Checklist](https://affpapa.org/en/nevibecode/mcp/front-end-checklist.md) — MCP server · ★ 74559
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16062
- [mcp-server-chart](https://affpapa.org/en/nevibecode/mcp/mcp-server-chart.md) — MCP server · ★ 4402
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3821
- [RevoGrid DataGrid MCP Pro](https://affpapa.org/en/nevibecode/mcp/revogrid-datagrid-mcp-pro.md) — MCP server · ★ 3450

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md