A free guide by New Money School
New Feature
AI-built websites all start to look the same. 21st.dev is a free component library — built by real designers — that plugs straight into Claude. Setup takes two minutes. Use it once and your sites stop looking generic.
What It Actually Is
21st.dev is a giant open-source registry of UI components — React + Tailwind — built by professional designers and engineers. Heroes, navigation bars, dashboards, pricing pages, login pages, footers. The component code is MIT-licensed and free for personal and commercial use. No restrictions.
On top of that there’s Magic MCP — an AI agent that lets Claude generate components from natural language. Tagline: “v0 in your IDE.” One slash command and Claude pulls the right component into your project.
Top 6 to GrabMy Favorite Categories
Hero Sections
Browse, find one that matches your brand vibe, copy. Best return on time of any category.
Nav Bars
A great nav fixes 30% of the AI-slop look. Sticky transparent navs are the move.
Dashboards
Sidebar layouts with stat cards. Use these for SaaS apps and internal tools.
Pricing Sections
3-tier comparisons that actually convert. Saves you a week of design iteration.
Testimonial Sections
Especially the ones with photos + tags. Your social proof page in 5 minutes.
Footers
Most AI-built footers are forgettable. A real one signals you actually shipped a product.
SetupConnect To Claude in 2 Minutes
01
Get a free Magic MCP API key
Sign up at 21st.dev → open the Magic Console → copy your API key. The free tier gives you 5 component generations per month. Pro is $20/month for 50.
02
Run this in your terminal
npx @21st-dev/cli@latest install claude --api-key YOUR_KEY_HERE
Replace YOUR_KEY_HERE with the key you just copied. The CLI handles the Claude Code config automatically. Restart Claude Code when it’s done.
03
Test with the /ui command
In any Claude Code project, type /ui followed by what you want. Magic MCP generates the component, writes the files in the right places, and matches your existing code style.
Try These3 /ui Prompts to Start With
CopyPrompt 01 — Modern Nav
/ui modern responsive nav bar with logo on the left, 4 nav links centered, and a CTA button on the right. sticky on scroll with a subtle backdrop blur
CopyPrompt 02 — Dashboard
/ui clean dashboard layout with collapsible sidebar, top bar with search and avatar, and a main area with 4 stat cards on top and a chart below
CopyPrompt 03 — Hero
/ui hero section with a bold headline, a one-line subhead, two CTA buttons, and a large product screenshot on the right. red accent color, lots of negative space
Commercial use note
The component registry itself is MIT-licensed — safe to ship in commercial products, no attribution required. Magic MCP is rate-limited by tokens (5/mo free, 50/mo Pro). If you’re building a paid product or a client site, just upgrade to Pro — $20/month is nothing for 50 production-ready components.
Honest limitations
Free tier (5 generations/month) burns out fast on a real project — budget for Pro. Some premium components require unlocking with multiple tokens. Figma layout import works great but needs extra setup the first time. And the components are React + Tailwind — if you’re building in Vue or plain HTML, you’ll need to adapt.