magic-21st

Use when generating React UI components via 21st.dev Magic MCP — prompting for components, searching the component registry, or installing components into the project. Also use when /ui slash commands are available or when the user says “magic”, “21st”, “prompt a component”, or “generate component from 21st”.

Model	Source
sonnet	pack: ux-ui

Full Reference

magic-21st

21st.dev Magic MCP reference — AI-powered React component generation from the Magic Component Platform. Covers the 4 Magic tools, the /ui prompt workflow, and registry integration.

Announcement

┏━ 🎨 magic-21st ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ [one-line: what component task]                 ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

Quick Reference

Item	Value
MCP server	`@21st-dev/magic`
Install	`npx @21st-dev/magic@latest init`
API key var	`MAGIC_API_KEY`
Prompt prefix	`/ui` in Claude Code chat
Registry	21st.dev component marketplace
Component format	React + Tailwind CSS

Reference Index

I want to…	File
Prompt Magic to generate a new component	reference/21st-magic-tools.md
Search the 21st.dev component registry	reference/21st-magic-tools.md
Install a component from the registry	reference/21st-magic-tools.md
Update an existing component via Magic	reference/21st-magic-tools.md
Configure Magic MCP setup and auth	reference/21st-setup.md

Usage: Read the reference file matching your current task. Each file has exact tool signatures and required parameters.

The /ui Workflow

The primary pattern — prompt Magic directly in Claude Code chat:

/ui Create a pricing table with 3 tiers, monthly/annual toggle, and feature comparison

Magic intercepts the /ui prefix, invokes 21st_magic_component_prompt, and returns the generated component inline. No extra steps needed when the MCP is configured.

Skill Chains

After Magic generates a component:

component-library — register it in the project’s component library
figma-sync — export tokens from Figma before prompting
generate-workflow — full design-to-code pipeline orchestration
ui-craft (frontend pack) — set aesthetic direction before prompting Magic

Completion Pattern

Component generated: [component name]
Files created:       [paths]
Registry source:     [21st.dev URL or custom]
Next:                register in component-library or adjust tokens