What is 21st.dev?
React and Tailwind components, themes and templates that you or your AI coding agent add to a repo.
Who is 21st.dev best for?
21st.dev is best for front-end developers who want ready-made React components that their AI coding agent installs.
Agent-built front ends
Copy a component's prompt or CLI command and Claude Code, Cursor, Codex or Lovable builds it into your codebase with your theme.
Landing page sections
Over 12,000 community components, 371 templates and 976 themes cover heroes, pricing tables, testimonials and shader backgrounds.
shadcn/ui projects
Components are React and TypeScript with Tailwind CSS in the shadcn registry format, so they run in Next.js, Vite, Remix or Astro.
Design review on pull requests
Design Bug Bot flags contrast, spacing and layout bugs on each pull request and suggests the code to fix them.
How much does 21st.dev cost?
21st.dev is free for browsing and 2 component copies or installs a day; Builder costs $8 a month billed quarterly, or $6 a month billed yearly, for unlimited copies.
- Browse and search the whole library
- 2 component copies or installs a day
- 5 Design Bug Bot pull request reviews
- Unlimited copies and installs on the web, MCP and CLI
- Shader, gradient and ASCII art builder
- 17,500+ icons searched by meaning
- 500 AI credits a month for 21st AI
- Design Bug Bot on every pull request
- Compare drafts from several AI models
- 2 to 50 seats on one bill
- Shared collections and private team components
- Admin controls and priority support
Paying yearly costs 25% less: Builder is $6 a month ($72 a year), Builder + AI $15 and Team $7.50 a seat. Builder + AI also comes with 1,000 credits for $40 or 2,000 for $80 a month, billed quarterly. Extra credits cost $5 per 100 and roll over. Payments are non-refundable. Full pricing on 21st.dev. We checked these prices on .
How do readers rate 21st.dev?
No one has rated 21st.dev yet. Be the first.
Sign in to rate. One rating per account.
How do I connect 21st.dev to my AI agent?
21st.dev MCP is 21st.dev's official MCP server. Add it to your agent once, then ask it to search 21st.dev for React components and add them to your app.
Gives your agent the 21st.dev catalogue of community React components, so it can find a fitting piece of UI and work it into your codebase.
$ claude mcp add --transport http 21st-dev https://21st.dev/api/mcp
Claude Code connects to 21st.dev over the web.
21st.dev's setup guide covers the sign-in.
Then ask your agent
- Runs
- On the web
- Sign-in
- See guide
- Checked
- Answered 13 Nov
- Guide
- 21st.dev
What are the best 21st.dev alternatives?
Three tools on Recaply do 21st.dev's job. shadcn/ui and Magic UI are open source, so you can run them on your own server.
ShadcnblocksFreeLibrary of 2,800+ shadcn/ui blocks and 2,200+ components you copy or install with the shadcn CLI.
shadcn/uiOpen SourceFree, MIT-licensed set of accessible React components whose source the CLI copies into your app.
Magic UIOpen SourceOpen-source set of 150+ animated React components on Tailwind CSS and Motion for landing pages.
Questions about 21st.dev
What is 21st.dev?
React and Tailwind components, themes and templates that you or your AI coding agent add to a repo.
Who is 21st.dev for?
21st.dev is best for front-end developers who want ready-made React components that their AI coding agent installs.
Is 21st.dev free?
Yes. 21st.dev has a free plan: browse and search the whole library.
How much does 21st.dev cost?
21st.dev's paid plans are Builder at $8 per month, billed quarterly, Builder + AI at $20 per month, billed quarterly and Team at $10 per seat per month, billed quarterly.
Does 21st.dev have an MCP server?
Yes. 21st.dev MCP is 21st.dev's official MCP server, so agents such as Claude Code, Cursor, Codex and GitHub Copilot can search 21st.dev for React components and add them to your app. 21st.dev runs it on the web.
Is there an open source alternative to 21st.dev?
Yes. shadcn/ui and Magic UI are open source tools that do the same job, so you can run your own.
What are the best 21st.dev alternatives?
The closest alternatives on Recaply are Shadcnblocks, shadcn/ui and Magic UI.
Where can I try 21st.dev?
On its official website, 21st.dev.
How do I add a 21st.dev component to my project?
Press Copy prompt on a component and paste it into Claude Code, Cursor, Codex or Lovable, and the agent builds it in your codebase with your theme. Every component also has a shadcn CLI command, and the 21st MCP server lets an agent search and install from the editor.
Does 21st.dev work with Claude Code and Cursor?
Yes. The 21st MCP server connects the library to Cursor, Claude Code, Windsurf, VS Code and other MCP clients, and npx @21st-dev/cli init sets up the terminal tool. Free accounts get 2 copies or installs a day across the web, MCP and CLI.
daisyUI
BoardUI
React Bits
termcn
Arc UI
Shadcn UI Kit