Free guide · 21st.dev + Claude

I can spot an AI-built website in seconds. Here is the easy fix.

AI-built sites all start to look the same. 21st.dev is a free library of UI components, built by real designers and engineers, that plugs straight into Claude. Here are the ones I reach for most, plus how to wire it into Claude so it pulls them for you.

See the course

No signup needed. Everything is right here on this page.

Hero

Navbar

Pricing

$49/mo

Reviews

Dashboard

2,481+12%

Describe the component, and Claude pulls it in from 21st.dev. ✦

What it actually is

A giant library of UI components, most of them free to copy.

Hero sections, navigation bars, testimonials, footers, login pages, dashboards, product cards, anything you can think of, made by real designers and engineers. You browse, pick what you like, and get the prompt or the code to drop into Claude. And it is not sponsored, just genuinely useful.

21st.dev

This is 21st.dev: browse, pick a component, and let Claude pull it straight into your project.

Top picks

The components I reach for most

Hero sections

The first thing people see, and the fastest way to stop looking generic.

Navigation bars

Clean, responsive navs with mobile and menu states handled.

Testimonials

Social proof that looks designed, carousels and grids.

Pricing tables

Tiered pricing with a highlighted plan, done right.

Login screens

Polished auth pages you would otherwise style by hand.

Dashboards

Stat cards, tables, and layouts for behind the login.

Setup · about 3 minutes

Two ways to use it, the second is better

The website way

Browse the library on 21st.dev, find a component you like, click it, and copy the prompt or code straight into Claude.

Connect the MCP to Claude

They have a Magic MCP that connects directly to Claude. Add it once with your free API key and restart Claude.

Describe what you want

Tell Claude the component you need, and it pulls the right one from 21st.dev, drops it into your project, and you keep iterating.

Connect it to Claude, paste this config

{
  "mcpServers": {
    "magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-key-here\""]
    }
  }
}

Add this to your Claude MCP config, swap in your free key from 21st.dev, and restart Claude. Then just describe the component you want and Claude pulls it in.

Try these

Component requests to copy

Paste one into Claude and watch the component appear.

Tap a request to copy it.

Honest limitations

The fine print, no hype

The free tier gives you a limited number of generations each month.
Some premium components are paid, but most are free to copy.
You still need taste: review and tweak what it generates.
The clearer you describe what you want, the better the result.

From free guide to finished product

You have the free part. Here is the whole path.

Everything above is yours, free. When you are ready to go from a blank screen to a real product you own, live on your own domain, this is the step that gets you there. Prices are right here, so you never have to go looking.