# UI Beats [Health: Active]

**Category:** 💻 Developer Tools  
**Repository:** https://github.com/nikhils4/ui-beats  
**GitHub Stars:** 233  
**Views:** 0  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/ui-beats

## Description
MCP server for UI Beats. Let your coding agent search, read and install animated React components.

## Claude Desktop Quick Installation
Install path detected from listing signals. Uses `npx` (confidence: high):

```json
"mcpServers": {
  "ui-beats": {
    "command": "npx",
    "args": ["-y","shadcn@latest"]
  }
}
```

## Documentation

## What the UI Beats MCP server does

The UI Beats MCP server gives coding agents access to a catalogue of animated React components. The components are built with TypeScript, Tailwind CSS, and Motion, and are intended to be copied into the application rather than imported from a runtime package. Developers retain the component source and can modify it after installation.

The catalogue contains 52 components in animation, background, button, card, general component, and text categories. Examples include animated lists, beams, buttons, card effects, tabs, timelines, text reveals, and ticker components. Each component has documented props and an installation path.

## How it works

Agents can query the catalogue through four MCP tools: `search_components`, `get_component`, `list_components`, and `get_install_command`. A typical workflow is to search by name or category, inspect a matching component and its props, then request the command needed to add it to the project.

Installation uses the shadcn CLI. The returned command points to a UI Beats registry entry, and the CLI writes the component into the application while installing the npm packages required by that component. The MCP server therefore provides discovery and implementation details, while the resulting code remains part of the user’s project.

The same content is also available over documented URLs for agents that only retrieve web resources. These include an index of component markdown files, a full text export, individual component pages in markdown, and a JSON catalogue containing props and guidance.

## Setup and configuration

Add the server to Claude Code with:

```bash
claude mcp add uibeats -- npx -y @uibeats/mcp
```

The command runs the package through npx and does not require an environment variable according to the provided setup instructions. The repository also documents local development for contributors: Node 20.9 or newer and Yarn 4 through Corepack are required. After cloning the repository, run `corepack enable`, `yarn install`, and `yarn dev` to start the site locally.

## Tools and capabilities

The UI Beats MCP server supports these operations:

- Search the component catalogue.
- List available components.
- Read a component’s source and documented props.
- Retrieve the shadcn CLI command for installation.

The component library uses shadcn theme variables such as card, border, and muted foreground values. Components also honor `prefers-reduced-motion`; the project states that this behavior is checked across the registry. These details matter when an agent is selecting components for an existing themed interface or an accessibility-conscious application.

## Limitations and notes

The UI Beats MCP server supplies component code and installation information; it is not described as a conventional package that applications import. The available material does not document authentication, server-side data access, or project-specific code modification beyond returning component source and install commands.

Components can also be copied manually from their documentation pages. The catalogue and component count may change as the project evolves, so agents should query the available entries rather than assume that every listed component remains unchanged.

_Full upstream README: https://allmcps.com/mcp/ui-beats/readme_