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.
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.
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
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.
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.
The Only AI Masterclass You Need
If this guide helped, but you’re looking to go deeper, I got you!! My 30-Day Challenge takes you from saving AI tips you never use to actually building with AI, step-by-step.
I show you exactly how I automated two e-commerce brands, my social media, and most of my personal life, then hand you the agents, workflows & systems to do the same. I’m teaching you every single thing I know with one lesson and one build a day.
Join the AI Masterclass →© 2026 Mariah Brunner. All rights reserved.