Magic MCP plugin: what it installs and how to add it
Finds React UI components and themes from 21st.dev, retrieves their code, and accesses hosted AI when enabled.
From the Marketplace: 21st-dev marketplace
Install
> /plugin marketplace add 21st-dev/magic-mcp> /plugin install 21st@21st-devRun both lines inside Claude Code: the first adds the marketplace, the second installs the plugin.
What is inside
- 1skill
- 1MCP server
About this plugin
The plugin connects your coding agent to 21st.dev through an MCP server. It can search the catalogue for UI components, themes and templates, retrieve component code, and access generation tools when hosted 21st AI is enabled.
Use it when building or refining interfaces and you want to discover existing React and Tailwind patterns instead of starting from scratch. It needs a 21st API key, provided through the API_KEY_21ST environment variable. Without hosted AI access, you can still search and retrieve components for adaptation in your project.
What's inside
- 1 skill:
21st-ui - 1 MCP server
Related plugins
- Open DesignConnects coding agents to the local OpenDesign app for projects, files, previews and design systems through an MCP server.Marketplace: open-designGitHub stars: 99.1k
- ImpeccableAdds design vocabulary and review guidance for building clearer, more consistent frontend interfaces with AI coding agents.Marketplace: claude-communityGitHub stars: 73.7k
- Accessibility ComplianceAudits web interfaces against WCAG and checks screen-reader, keyboard, and inclusive design concerns.Marketplace: claude-code-workflowsGitHub stars: 40.1k
- Brand Landing PageGuides brand discovery and iterative landing-page design in Stitch, producing a deployment-ready static HTML bundle.Marketplace: claude-code-workflowsGitHub stars: 40.1k
Skills, not plugins
Prefer a single skill for design work? 86 skills in the same category, each installed on its own.