← Back to all free guides
A free guide by Mariah Brunner ↗ INSTAGRAM ↗ TIKTOK

21st.dev
Fixes AI Slop

AI-built websites all start to look the same. 21st.dev is a library of components made by real designers, and it plugs straight into Claude. Use it once and your sites stop looking generic.

21st.dev is a huge community library of UI components built with React and Tailwind, from hero sections and nav bars to full dashboards and login screens. You can browse all of it for free. Most components are MIT-licensed, so you can use them in commercial work, but each component page shows its own license, so check it before you ship. (21st licensing)

The part I love is the 21st MCP. It connects Claude Code to the whole library, so you can ask in plain English for a pricing section and Claude searches 21st, pulls the code into your project and adapts it to your brand.

What’s Free And What’s Paid
  1. Free: browse everything, plus two free retrievals a day. A retrieval is copying or installing one component, theme, icon or prompt.
  2. Builder, $6 a month billed yearly ($8 quarterly): unlimited component copies and installs, including through the MCP.
  3. Builder + AI, from $15 a month billed yearly ($20 quarterly): adds 500 credits a month for 21st AI, which generates brand-new components from a prompt. The free plan doesn’t include AI generation.

Prices from the 21st pricing page and help center. For most people, Builder is plenty. Claude Code does the adapting, so you rarely need 21st AI on top.

My Favorite Categories

01

Hero Sections

Find one that matches your brand vibe and grab it. Best return on your time of any category. Browse heroes

02

Nav Bars

A real nav does a lot of the work of making a site look designed. Sticky, transparent navs are the move. Browse navs

03

Dashboards

Sidebar layouts with stat cards. Use these for SaaS apps and internal tools.

04

Pricing Sections

Clean 3-tier comparisons that save you days of design back-and-forth. Browse pricing

05

Testimonials

The ones with photos and tags look the most real. Your social proof section in minutes. Browse testimonials

06

Footers

Most AI-built footers are forgettable. A real one signals you actually shipped a product. Browse footers

Connect It To Claude Code

01

Get your 21st API key

Sign up at 21st.dev, then go to 21st.dev/mcp and create a key. If you used the old Magic MCP, your old key was reset, so make a new one.

02

Run the setup in your project folder

Run: npx @21st-dev/cli@latest init --client claude --write

This saves the 21st MCP setup for Claude Code. Swap the key placeholder in that config for your real key (or set it as API_KEY_21ST in your environment), then restart Claude Code. Leave off --write if you want to see the config printed first, before anything is saved.

03

Ask in plain English

The old /ui command from Magic MCP is gone. Now you just tell Claude what you want, like "search 21st for a pricing section with three tiers and install the best one." (21st MCP on GitHub)

No Claude Code?

You can still use 21st on the free plan. Open any component, press ⌘C to copy the code (or ⌘X to copy a ready-made AI prompt), and paste it into Claude with a note about your brand. That uses one of your two daily retrievals.

3 Prompts To Start With

Paste one of these into Claude Code inside your project and fill in the brackets.

Prompt 01: Modern Nav
You're my front-end designer. Use the 21st MCP to find a navigation bar for this project, then install and adapt it. Context: - Project: [what the site is, e.g. "booking site for a Pilates studio"] - Brand: [colors, fonts, vibe, e.g. "cream and black, serif headings, calm and premium"] - Links: [list the 4 or 5 nav links] - Main button: [e.g. "Book a class"] Steps: 1. Search 21st for 3 navbar options that fit this brand. Show me each one's name, author, license and a one-line reason it fits. Wait for me to pick. 2. Install the one I pick into the right folder for this project's structure. 3. Swap in my links, button text and brand colors. Make it sticky on scroll with a subtle backdrop blur and a working mobile menu. 4. Match the code style already in this repo (naming, file layout, Tailwind config). Rules: - Don't touch any other page or component. - If a component's license isn't MIT or is "unknown", tell me before installing it. - When you're done, tell me which files changed and how to preview it.
Prompt 02: Dashboard
You're my product designer. Use the 21st MCP to build the main dashboard screen for this app. Context: - App: [what it does and who uses it] - The 4 numbers users check most: [e.g. "bookings this week, revenue, no-shows, new clients"] - The one chart that matters: [e.g. "revenue by week for the last 12 weeks"] Steps: 1. Search 21st for a dashboard layout with a collapsible sidebar and a top bar with search and an avatar. Show me 2 or 3 options with their license and wait for me to choose. 2. Install the one I pick. Put 4 stat cards across the top using my numbers and the chart below them. 3. Use placeholder data in one clearly named file so I can wire in real data later. 4. Make it work on a phone: the sidebar collapses and the stat cards stack. Rules: - Reuse components already in this repo before adding new ones. - No new libraries unless you ask me first. - Finish with a short list of the files you changed.
Prompt 03: Hero
You're my landing page designer. Use the 21st MCP to replace the hero section on this page. Context: - What I sell: [one sentence] - Who it's for: [one sentence] - Headline idea: [or "write 3 options"] - Buttons: [primary button text] and [secondary button text] - Visual: [e.g. "product screenshot on the right" or "full-width photo"] - Style: [e.g. "red accent color, lots of negative space, bold sans-serif headline"] Steps: 1. Search 21st for 3 hero sections that fit this style. Show me name, author and license for each, and wait for my pick. 2. Install it, then rewrite the copy with my headline, a one-line subhead and both buttons. 3. Make sure it looks right at phone width and the main button is visible without scrolling. Rules: - Keep my existing nav and footer exactly as they are. - Don't make up stats, logos or testimonials. Leave clear placeholders instead. - Tell me which files changed and anything I need to fill in.

Honest Limitations

Two free retrievals a day runs out fast on a real project, so budget for Builder if you’re building for a client. Everything is React and Tailwind, so if your site is plain HTML or Vue, ask Claude to convert the component for you.