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.