ReactBits
A Model Context Protocol server that provides AI assistants with access to ReactBits.dev components - a collection of 135+ animated React components for creative developers.
What is ReactBits?
ReactBits is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to model context protocol server that provides ai assistants with access to reactbits.dev components - a collection of 135+ animated react components for creative developers.
A Model Context Protocol server that provides AI assistants with access to ReactBits.dev components - a collection of 135+ animated React components for creative developers.
This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- A Model Context Protocol server that provides AI assistants
Use Cases
Maintainer
Works with
Installation
NPM
npx -y reactbits-dev-mcp-serverManual Installation
npx -y reactbits-dev-mcp-serverConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use ReactBits
The ReactBits MCP Server connects AI assistants to the ReactBits.dev component library, giving them direct access to 135+ animated React components for creative developers. Using five dedicated tools, Claude and other MCP clients can browse component categories, retrieve full source code, search by name or description, and fetch usage examples — all without leaving the chat. This is especially useful when building animated UIs or prototyping with Tailwind-styled interactive components.
Prerequisites
- Node.js 18 or later installed
- An MCP-compatible client such as Claude Desktop, Cursor, or VS Code with Continue
- A GitHub Personal Access Token (optional but recommended — raises API rate limit from 60 to 5,000 req/hr)
- npm or npx available on your PATH
Verify Node.js is installed
ReactBits MCP Server runs via npx and requires Node.js 18+. Confirm your version before proceeding.
node --versionTest the server runs
Run the server once with npx to confirm it starts without errors. You should see MCP handshake output. Press Ctrl+C to stop after confirming.
npx reactbits-dev-mcp-serverObtain a GitHub token (optional)
Visit https://github.com/settings/tokens and generate a token with public repo read access. This raises your GitHub API rate limit from 60 to 5,000 requests per hour, which matters when fetching many components.
Add to your MCP client configuration
Open your MCP client's config file (e.g., claude_desktop_config.json for Claude Desktop) and add the server entry. Include the GITHUB_TOKEN env var if you obtained one.
{
"mcpServers": {
"reactbits": {
"command": "npx",
"args": ["reactbits-dev-mcp-server"],
"env": {
"GITHUB_TOKEN": "your_github_token_here"
}
}
}
}Restart your MCP client
Fully quit and reopen Claude Desktop (or your chosen client) so it picks up the new server configuration. The ReactBits server will connect automatically on startup.
Verify the connection
In your MCP client, ask it to list available ReactBits categories. A successful response confirms the server is connected and tools are active.
ReactBits Examples
Client configuration
Add this block to your claude_desktop_config.json to register the ReactBits MCP server. Remove the env block if you don't have a GitHub token.
{
"mcpServers": {
"reactbits": {
"command": "npx",
"args": ["reactbits-dev-mcp-server"],
"env": {
"GITHUB_TOKEN": "your_github_token_here"
}
}
}
}Prompts to try
Use these prompts in Claude Desktop after connecting the server to browse and retrieve ReactBits components.
- "Show me all background animation components from ReactBits"
- "Find glowing button components with Tailwind support"
- "Get the full source code for the glass morphism card component"
- "How do I implement the particle background effect from ReactBits?"
- "List all available component categories in ReactBits"Troubleshooting ReactBits
GitHub API rate limit exceeded — component fetches fail or return errors
Set the GITHUB_TOKEN environment variable in your config. This raises the limit from 60 to 5,000 requests per hour. Generate a token at https://github.com/settings/tokens with public repo read access.
Some components return incomplete or placeholder code (e.g. Buttons, Forms, Loaders)
These categories are marked as incomplete (quality score ~2/10) in ReactBits. Focus on Backgrounds, Animations, and Text Animations which are rated Excellent (9-10/10) and return complete implementations.
npx command not found or server fails to start
Ensure Node.js 18+ is installed and npx is on your PATH. Run 'node --version' and 'npx --version' to verify. If npx is missing, update Node.js from https://nodejs.org.
Frequently Asked Questions about ReactBits
What is ReactBits?
ReactBits is a Model Context Protocol (MCP) server that model context protocol server that provides ai assistants with access to reactbits.dev components - a collection of 135+ animated react components for creative developers. It connects AI assistants to external tools and data sources through a standardized interface.
How do I install ReactBits?
Install via npm with the command: npx -y reactbits-dev-mcp-server. Then add the server configuration to your AI client's JSON config file (e.g., claude_desktop_config.json or .cursor/mcp.json).
Which AI clients work with ReactBits?
ReactBits works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is ReactBits free to use?
Yes, ReactBits is open source and available under the MIT License license. You can use it freely in both personal and commercial projects.
ReactBits Alternatives — Similar Developer Tools Servers
Looking for alternatives to ReactBits? Here are other popular developer tools servers you can use with Claude, Cursor, and VS Code.
Ecc
★ 188.2kThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
Javaguide
★ 155.8kJava 面试 & 后端通用面试指南，覆盖计算机基础、数据库、分布式、高并发、系统设计与 AI 应用开发
Gemini CLI
★ 104.5kA secure MCP server that wraps the Google Gemini CLI, allowing clients to query Gemini models using local OAuth sessions without requiring an API key. It provides tools for model interaction and diagnostics with built-in protection against command in
Awesome MCP Servers
★ 87.3k⭐ Curated list of Model Context Protocol (MCP) servers - tools that extend Claude Desktop, Cursor, Windsurf, and other MCP clients with custom capabilities.
MCP Servers
★ 86.0kModel Context Protocol Servers
CC Switch
★ 77.5kA cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Gemini CLI & Hermes Agent. Only official website: ccswitch.io
Browse More Developer Tools MCP Servers
Explore all developer tools servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up ReactBits in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use ReactBits?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.