Magic
by 21st-dev
Magic MCP turns a plain-language description into a ready-to-drop React/Tailwind component, searchable against a 10,000+ component library right inside your editor.
Set up via 21st CLI
npx @21st-dev/cli@latest init --client cursor
About
Magic MCP, now folded into the broader 21st MCP, lets an agent generate a UI component from a prompt like "a pricing card with a monthly/yearly toggle" and get back working React and Tailwind code, rather than a description of what such a component might look like. Its component-inspiration tool searches a library of over 10,000 existing components so an agent can pull a close match and adapt it instead of generating from scratch every time.
It also includes a refiner tool for iterating on a component you've already generated — tightening spacing, swapping a color scheme, adjusting responsiveness — and a logo search tool for dropping in real brand marks instead of placeholder icons. The original @21st-dev/magic package still works as a compatibility shim, but new setups go through the 21st CLI, which wires up the unified 21st MCP for Cursor, Claude, Windsurf, or VS Code in one command.
Key features
- Generates React/Tailwind components from natural-language prompts
- Searches a 10,000+ component library for inspiration or direct reuse
- Refiner tool for iterating on spacing, color, and responsiveness of generated components
- Logo search tool for inserting real brand marks
- One-command setup via the 21st CLI for Cursor, Claude, Windsurf, or VS Code
- Legacy @21st-dev/magic package still works as a compatibility proxy
Use cases
- Scaffolding a new UI component from a one-line description instead of hand-coding the JSX
- Finding an existing, tested component close to what you need instead of building from zero
- Iterating on a generated component's styling without leaving the editor's chat panel
- Swapping placeholder icons for accurate brand logos in a generated landing page
Available tools
21st_magic_component_builder
Generates a new UI component, React plus Tailwind, from a natural-language description.
21st_magic_component_inspiration
Searches the 10,000+ component library for existing designs matching a description.
21st_magic_component_refiner
Iterates on a previously generated component — adjusting styling, layout, or responsiveness.
logo_search
Finds and inserts a real company or brand logo instead of a placeholder icon.
Frequently asked questions
Is @21st-dev/magic still the right package to install?
It still works and is kept as a compatibility proxy for existing configs, but new setups should use the 21st CLI, npx @21st-dev/cli@latest init, which installs the unified 21st MCP instead.
Does it only generate components, or can it find existing ones too?
Both — 21st_magic_component_builder generates new code from a prompt, while 21st_magic_component_inspiration searches an existing library of 10,000+ components you can reuse or adapt directly.