21st Magic MCP
MCP server from 21st.dev that lets Cursor, Claude Code and Windsurf search and generate React and Tailwind UI components inside the editor.
Updated
✨ Try AgentScout's free AI image generator →Good for: writing code, research, connecting tools with MCP
Use cases
About 21st Magic MCP
21st Magic MCP is listed in our coding category and is aimed at builders. MCP server from 21st.dev that lets Cursor, Claude Code and Windsurf search and generate React and Tailwind UI components inside the editor. Pricing, as the maker states it: MCP code open source (ISC); 21st plans Builder $6/mo, Builder + AI $15/mo, Team $7.50/seat/mo (billed yearly). Maturity: Mature. We last checked the official link on 2026-10-21.
What is 21st Magic MCP?
21st Magic MCP lets coding agents such as Cursor, Claude Code and Windsurf search 21st.dev's catalog of React and Tailwind components, generate new UI with AI and publish your own, right from the editor. Magic MCP has now been replaced by the unified 21st MCP, installed with the 21st CLI.
The original @21st-dev/magic package is kept as a small proxy so old configurations keep working; old Magic API keys were reset, so you need a fresh key from 21st.dev/mcp. Component search and code retrieval are included in 21st plans, while AI generation uses monthly AI credits.
Sources: the official README and our directory listing, checked 2026-10-21. Official site: 21st.dev/mcp.
Who is 21st Magic MCP for?
Front-end developers who want their coding agent to pull in or generate polished React UI components.
21st Magic MCP at a glance
- Open source: Yes (ISC License)
- GitHub: 21st-dev/magic-mcp · 6,161 stars · 503 forks (as of Oct 21, 2026)
Key features
- Search 21st.dev React/Tailwind components from the editor
- Generate UI variants with AI
- Publish your own components
- Works with Cursor, Claude Code, Windsurf, Codex and VS Code
- Backwards-compatible proxy for old configs
21st Magic MCP pricing
- Builder: $6/mo yearly · marketplace, component installs via MCP and CLI
- Builder + AI: $15/mo yearly · 500-2,000 monthly AI credits, PR design reviews
- Team: $7.50/seat/mo yearly · 2-50 seats, shared collections, admin controls
Extra AI credits: 100 for $5 (roll over). Searching is free with 2 installs a day.
Source: official pricing page, checked Oct 21, 2026. Prices change; check the source before buying.
21st Magic MCP FAQ
What is 21st Magic MCP?
21st Magic MCP lets coding agents such as Cursor, Claude Code and Windsurf search 21st.dev's catalog of React and Tailwind components, generate new UI with AI and publish your own, right from the editor. Magic MCP has now been replaced by the unified 21st MCP, installed with the 21st CLI.
Who is 21st Magic MCP for?
Front-end developers who want their coding agent to pull in or generate polished React UI components.
Is 21st Magic MCP free?
21st Magic MCP doesn't list a free plan on its pricing page (checked Oct 21, 2026). Plans: Builder: $6/mo yearly; Builder + AI: $15/mo yearly; Team: $7.50/seat/mo yearly.
How much does 21st Magic MCP cost?
As of Oct 21, 2026, 21st Magic MCP's official pricing page lists: Builder: $6/mo yearly; Builder + AI: $15/mo yearly; Team: $7.50/seat/mo yearly. Extra AI credits: 100 for $5 (roll over). Searching is free with 2 installs a day.
Is 21st Magic MCP open source?
Yes. 21st Magic MCP is released under the ISC License, according to its GitHub repository.
How much does 21st cost?
The MCP code is open source (ISC). 21st plans: Builder $6/month, Builder + AI $15/month and Team $7.50 per seat/month (billed yearly); extra AI credits are 100 for $5.
What are alternatives to 21st Magic MCP?
Similar tools include Trail Code, CC Switch, Understand-Anything, shadcn/ui MCP Server, Compozy and Shipyard.
21st Magic MCP ratings and reviews
Be the first to rate 21st Magic MCP: tap 1 to 5 stars below. A written review is optional.
21st Magic MCP alternatives
Other coding tools in our directory. See all coding tools →
Trail Code
Context layer that makes Claude Code, Cursor, Codex and other coding agents faster and cheaper on large codebases.
CC Switch
Desktop manager for Claude Code, Codex, Gemini CLI, OpenCode, OpenClaw and other coding agents that switches API providers in one click and manages MCP servers, skills and prompts.
Understand-Anything
Turns any codebase, knowledge base or docs folder into an interactive knowledge graph you can explore and question, working inside Claude Code, Codex, Cursor, Copilot and Gemini CLI.
shadcn/ui MCP Server
MCP server that gives AI assistants shadcn/ui v4 components, blocks and demos for React, Svelte, Vue and React Native.
Compozy
Operating system for AI agents that turns Claude Code, Codex, Gemini CLI and Cursor into a team with task handoff, loops, jobs and shared memory.
Shipyard
Shipyard, from coss.com, runs Claude Code, Codex and other coding agents on your own dev machines, each task in its own worktree with its own terminals, dev server and live page previews, so agents keep working when your laptop sleeps.
Popular searches with this tool
🏆 Ranked in: MCP servers that work with Cursor · Cline alternatives
🔁 Listed in: Goose alternatives · Zed alternatives · Cline alternatives
Badge for makers
Built 21st Magic MCP? Add this badge to your README or site. It links back to this page. About badges
