21st-dev-magic-mcp

name	21st-dev-magic-mcp
description	Use the 21st.dev Magic MCP (now the 21st MCP) to generate, search, and fetch high-quality React components and UI inspiration. Use when you need to generate new components, get design inspiration, search for components, fetch specific component code, or find logos. Install via npx @21st-dev/cli.
license	MIT
metadata	{"author":"21st-dev","version":"1.0.0"}

21st.dev Magic MCP

The 21st.dev Magic MCP (now the "21st MCP") lets you generate, search, and fetch high-quality React components and UI inspiration directly in your workflow.

When to Use This Skill

Apply when:

• Generating new React components from a description
• Getting UI design inspiration
• Searching for existing components
• Fetching specific component code
• Finding logos for a project
• Building polished, production-ready React UIs

Setup

Install and initialize the 21st CLI:

npx @21st-dev/cli@latest init --client <cursor|claude|vscode|windsurf|codex>

Get your API key at: https://21st.dev/mcp

Available Tools

• generate — Generate a new React component from a natural language description
• get_inspiration — Get UI design inspiration and ideas
• search — Search for existing components
• get_component — Fetch the code for a specific component
• search_logo — Search for and fetch logos

Workflow

1. Get inspiration for the design direction
2. Search for existing components that match your needs
3. Generate new components when nothing fits
4. Fetch component code to integrate into your project
5. Search for logos to complete the branding

Best Practices

• Provide clear, specific descriptions when generating components
• Reference existing components for consistency
• Review generated code before integrating
• Combine generated components with your design system

Resources

• Magic MCP — source repository
• 21st.dev — component marketplace