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.
For Your Job
If you’re ready to set up Claude for your specific job — with custom skills, connectors, and automations built around the work you do every day — I built a bootcamp just for you.
Start the Weekend Bootcamp →Go Even Further
If you’re looking to go even further, join mine and my husband’s community group where we give you all the AI agents and systems running our businesses.
Join the Community →© 2026 Mariah Brunner. All rights reserved.