ClaudeMap

21st MCP (formerly Magic MCP)

Search and generate production-ready React + Tailwind UI components from inside Claude Code.

MCP Serversuicomponentsfrontendreactmcp
Visit project21st-dev/magic-mcp

The UI-component MCP from 21st.dev, renamed from Magic MCP to the unified 21st MCP: gives Claude search over a large component library and generation of modern React + Tailwind UI matched to your stack. Note the old @21st-dev/magic package is now a compatibility proxy — new installs go through the 21st CLI.

What it does

  • Search a large curated library of React + Tailwind components from the agent
  • Generate new UI matched to your framework and styling conventions
  • Unified 21st CLI installer covers Claude Code, Cursor, VS Code, Windsurf, Codex
  • Old Magic MCP package kept as a thin proxy so existing configs keep working

When to use it

Best for frontend work where you want the agent to start from real, production-grade components instead of inventing markup from scratch — dashboards, marketing pages, internal tools.

Getting started

npx @21st-dev/cli@latest init --client claude

# other clients: cursor | vscode | windsurf | codex

Things to know

The rename (Magic → 21st) means most older tutorials point at the proxy package — follow 21st.dev/mcp for current setup. Generated UI still needs a design review before it ships.

Repository

21st-dev/magic-mcp

Charted

Related on the map

  • Exa MCP

    MCP Server

    Exa's official MCP server — live web search, crawling, and deep research wired into Claude.

    • official
    • search
    • web
    • mcp
    View

  • Chrome DevTools MCP

    MCP Server

    Official Chrome DevTools MCP server — performance tracing, network inspection, and live debugging for coding agents.

    • official
    • chrome
    • debugging
    • browser
    View

  • Vercel MCP Handler

    MCP Server

    Vercel's handler for spinning up MCP servers on Next.js, Nuxt, Svelte, and more.

    • deploy
    • vercel
    • serverless
    • edge
    View