---
name: "21st.dev Magic MCP"
slug: magic-mcp-21st
url: "https://dontmakeitugly.com/resources/magic-mcp-21st"
website: "https://21st.dev"
github: "https://github.com/21st-dev/magic-mcp"
docs: "https://21st.dev/magic"
type: mcp-server
categories:
  - agent-resources
  - components
tags:
  - mcp
  - components
  - react
  - tailwind
  - generation
  - cursor
  - claude-code
frameworks:
  - react
  - nextjs
  - tailwind
pricing: freemium
license: MIT (MCP server)
openSource: true
agentFriendly: excellent
agentAccessMethods:
  - mcp
  - documentation
  - github
  - public_web
difficulty: beginner
dateAdded: "2026-09-02"
lastVerified: "2026-09-02"
---

# 21st.dev Magic MCP

Describe a component in your agent and get a polished one generated from a large library.

- Type: MCP server
- Categories: Agent Resources, Components
- Pricing: Freemium · License: MIT (MCP server)
- Open source: yes
- Works with: React, Next.js, Tailwind CSS, MCP

## What it is

21st.dev hosts a community library of React and Tailwind components, and its Magic MCP server lets you ask your coding agent for a component in plain language ("a pricing table with a toggle") and receive one built from that library. Free tier with limits.

## Why it's here

Faster than browsing when you know roughly what you want. Treat the output as a starting point and restyle it to your system; it will come back in a generic style otherwise.

## Best for

- generating components in your agent
- quick UI scaffolding
- landing sections

## Links

- Website: https://21st.dev
- Docs: https://21st.dev/magic
- GitHub: https://github.com/21st-dev/magic-mcp

## Can my agent use this?

Yes, this is built for agents. Install the MCP server per the docs, then describe the component you need.

Agent friendliness: Excellent. Public docs, public source or an installable package. An agent can read, install and implement this directly.
Access methods: MCP, Docs, GitHub, Public website.

## Prompt to hand your agent

```text
Set up and use 21st.dev Magic MCP in this project.

What it is: Describe a component in your agent and get a polished one generated from a large library.

Website: https://21st.dev
Documentation: https://21st.dev/magic
GitHub: https://github.com/21st-dev/magic-mcp

Use it specifically for:
- generating components in your agent
- quick UI scaffolding
- landing sections

How you can access it: MCP, Docs, GitHub, Public website.
Works with: React, Next.js, Tailwind CSS.
License: MIT (MCP server). Respect it.

Follow the official setup instructions above. Once available, use it when it is relevant to the task rather than by default, and tell me what it changed.
```

## Related

- [shadcn MCP server](https://dontmakeitugly.com/resources/shadcn-mcp.md): Let your agent browse, search and install components from any shadcn registry.
- [v0](https://dontmakeitugly.com/resources/v0.md): Vercel's generative UI tool: describe a screen, get a shadcn/ui implementation.
- [Vercel Agent Skills](https://dontmakeitugly.com/resources/vercel-agent-skills.md): Installable skills that teach agents React, Next.js and web design best practices.
- [Aceternity UI](https://dontmakeitugly.com/resources/aceternity-ui.md): Showy, copy-paste React components for landing pages that need a moment.

21st.dev Magic MCP is an independent resource listed by Don't Make It Ugly. We link to it; we aren't affiliated with it. Pricing and licence details are as understood at the time of listing; check the official site.