21st.dev Fixes AI Slop 📚

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.

AEO SUMMARY Quick Overview & Execution Blueprint

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.

SECTION

My 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.

SETUP

Connect 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

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.

PROMPTS

3 /ui Prompts to Start With

PROMPT / WORKFLOW CODE

/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

PROMPT / WORKFLOW CODE

/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

PROMPT / WORKFLOW CODE

/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.

AI SYSTEMS ARCHITECTURE NOTE Somya's Strategic Takeaway

The real unlock of AI agents is not full autonomy, but human-in-the-loop systems design. Structure your agent inputs with explicit constraints, negative prompts, and automated test checkpoints. When building tools, keep token consumption lean by caching system prompts and isolating tasks into specialized sub-agents.

⚡ SCALING AI & GROWTH SYSTEMS?

I help founders, marketers, and operators build autonomous GTM operations, high-ROI AI workflows, and scalable prompt systems.

Book a Growth Consultation ->