21st.dev Magic MCP — Component Generation Skill
What It Is
21st.dev Magic is an MCP server that generates modern, production-ready UI components from natural language descriptions. It accesses 21st.dev's curated component library and outputs React + TypeScript + Tailwind CSS code directly into your project.
How to Invoke
Describe the component you need naturally. The MCP server tools will be available when the server is running. Common invocation patterns:
"Generate a hero section with animated text reveal and gradient background"
"Create a responsive navigation bar with transparent-to-solid scroll effect"
"Build a pricing card grid with hover animations"
"Design a testimonial carousel with star ratings"
Available Capabilities
Component Generation
- Hero sections, navbars, footers
- Cards, grids, pricing tables
- Forms, inputs, modals, dialogs
- Chat interfaces, AI prompt boxes
- Animated elements, loading states
- Dashboard layouts, sidebars
SVGL Integration
- Professional brand logos as SVG components
- Consistent sizing and color options
- Search by brand name
Best Practices for Prompting
DO
- Be specific about layout: "3-column grid on desktop, single column on mobile"
- Mention animations: "fade in on scroll with staggered delay"
- Specify colors: "use brand primary
#C9A035 as accent, #0D1B3E for text"
- Reference style: "luxury aesthetic, not generic SaaS"
- Include interaction: "hover lifts card with shadow, button has magnetic effect"
DON'T
- Don't say just "make a card" — specify what kind, what content, what style
- Don't forget responsive behavior — always mention mobile/tablet/desktop
- Don't skip accessibility — mention ARIA labels, keyboard navigation
- Don't ignore RTL — specify if Arabic/RTL support is needed
Integration with Projects
Generated components land as .tsx files. To integrate:
- Check the component's dependencies (framer-motion, gsap, etc.)
- Place in your project's component directory (e.g.,
src/components/ui/)
- Update imports to match your project's alias paths
- Adjust Tailwind classes to match your design tokens
- Add RTL support if bilingual (Arabic/English)
When to Use 21st.dev vs Hand-Coded
| Use 21st.dev Magic |
Hand-Code Instead |
| Standard UI components (cards, navbars, forms) |
Highly custom animations with GSAP timelines |
| Quick prototyping |
Components tightly coupled to app state |
| Starting point that you'll customize |
Complex multi-step forms with validation logic |
| Design inspiration and patterns |
Performance-critical components |
| Brand logos via SVGL |
Components with heavy business logic |
Combining with Other Skills
- premium-web-design: Use 21st.dev for base components, then apply premium animation patterns
- frontend-design: 21st.dev generates; frontend-design reviews and refines
- impeccable: Apply polish and micro-interactions after generation
- tailwind-patterns: Ensure generated Tailwind matches project design tokens
Configuration
MCP server configured in ~/.claude/settings.json:
{
"@21st-dev/magic": {
"command": "npx",
"args": ["-y", "@21st-dev/magic@latest"],
"env": {
"API_KEY": "${TWENTY_FIRST_DEV_API_KEY}"
}
}
}
API key stored in ~/.claude/.env as TWENTY_FIRST_DEV_API_KEY. Get a key at https://21st.dev/
1---2name: 21st-dev-magic-mcp3description: Generate premium React+TS+Tailwind UI components from natural language via 21st.dev Magic MCP server4---56# 21st.dev Magic MCP — Component Generation Skill78## What It Is91021st.dev Magic is an MCP server that generates modern, production-ready UI components from natural language descriptions. It accesses 21st.dev's curated component library and outputs React + TypeScript + Tailwind CSS code directly into your project.1112## How to Invoke1314Describe the component you need naturally. The MCP server tools will be available when the server is running. Common invocation patterns:1516```17"Generate a hero section with animated text reveal and gradient background"18"Create a responsive navigation bar with transparent-to-solid scroll effect"19"Build a pricing card grid with hover animations"20"Design a testimonial carousel with star ratings"21```2223## Available Capabilities2425### Component Generation26- Hero sections, navbars, footers27- Cards, grids, pricing tables28- Forms, inputs, modals, dialogs29- Chat interfaces, AI prompt boxes30- Animated elements, loading states31- Dashboard layouts, sidebars3233### SVGL Integration34- Professional brand logos as SVG components35- Consistent sizing and color options36- Search by brand name3738## Best Practices for Prompting3940### DO41- Be specific about layout: "3-column grid on desktop, single column on mobile"42- Mention animations: "fade in on scroll with staggered delay"43- Specify colors: "use brand primary `#C9A035` as accent, `#0D1B3E` for text"44- Reference style: "luxury aesthetic, not generic SaaS"45- Include interaction: "hover lifts card with shadow, button has magnetic effect"4647### DON'T48- Don't say just "make a card" — specify what kind, what content, what style49- Don't forget responsive behavior — always mention mobile/tablet/desktop50- Don't skip accessibility — mention ARIA labels, keyboard navigation51- Don't ignore RTL — specify if Arabic/RTL support is needed5253## Integration with Projects5455Generated components land as `.tsx` files. To integrate:56571. Check the component's dependencies (framer-motion, gsap, etc.)582. Place in your project's component directory (e.g., `src/components/ui/`)593. Update imports to match your project's alias paths604. Adjust Tailwind classes to match your design tokens615. Add RTL support if bilingual (Arabic/English)6263## When to Use 21st.dev vs Hand-Coded6465| Use 21st.dev Magic | Hand-Code Instead |66|---|---|67| Standard UI components (cards, navbars, forms) | Highly custom animations with GSAP timelines |68| Quick prototyping | Components tightly coupled to app state |69| Starting point that you'll customize | Complex multi-step forms with validation logic |70| Design inspiration and patterns | Performance-critical components |71| Brand logos via SVGL | Components with heavy business logic |7273## Combining with Other Skills7475- **premium-web-design**: Use 21st.dev for base components, then apply premium animation patterns76- **frontend-design**: 21st.dev generates; frontend-design reviews and refines77- **impeccable**: Apply polish and micro-interactions after generation78- **tailwind-patterns**: Ensure generated Tailwind matches project design tokens7980## Configuration8182MCP server configured in `~/.claude/settings.json`:83```json84{85 "@21st-dev/magic": {86 "command": "npx",87 "args": ["-y", "@21st-dev/magic@latest"],88 "env": {89 "API_KEY": "${TWENTY_FIRST_DEV_API_KEY}"90 }91 }92}93```9495API key stored in `~/.claude/.env` as `TWENTY_FIRST_DEV_API_KEY`. Get a key at https://21st.dev/
YousefNabil-SOC