21st.dev alternatives: 8 options, from parts to direction

21st.dev alternatives for free components, AI generation or a whole designed site: eight options with prices, licenses and what each decides for you.

A tall glass cabinet of small drawers on pure black, a few drawers pulled open with loose glass fragments inside, beside one sealed glass block that holds a single finished form, all lit in turquoise.
A registry hands you drawers of parts. Someone still has to decide the whole.

21st.dev is a community registry of React and Tailwind CSS components, built to work with shadcn/ui, where many authors publish and the code is copied into your repository rather than imported. You can browse it free and copy two components a day. At the time of writing the Builder plan removes that cap for $6 a month billed yearly, and AI generation is a separate add-on paid in credits.

People search for an alternative for one of three reasons. They want more parts, or parts from one consistent author. They want a model to generate the section instead of copying it. Or they have assembled a page from a registry and it looks like every other page assembled from that registry.

The short answer for each: shadcn/ui, Magic UI, Aceternity UI, React Bits and Origin UI cover the first, all with free tiers. v0 and Aura cover the second. The third is a different problem, because no registry decides your palette, type scale, motion curve or section order, and an AI builder decides them by default. That gap is where Thanor sits: a library of whole designed sites, each written as a specification your AI builds.

What 21st.dev gives you, and what Magic MCP became#

The registry is the product. Its catalog covers heroes, pricing sections, buttons, inputs and dialogs, plus full templates (some premium), themes, shaders and gradients. Every component installs with the shadcn CLI, and each one can also be copied as a prompt for Cursor, Claude Code, v0 or Lovable, the same pairing of code and prompt that Scrolltide sells for whole templates.

Magic MCP is now called the 21st MCP. The old @21st-dev/magic package still works as a thin proxy, old Magic API keys were reset, and setup is one command: npx @21st-dev/cli@latest init --client cursor, with claude, codex or vscode in place of cursor for other clients. The old /ui trigger phrase is no longer needed. The server's main tools, as its own page lists them:

  • search finds components, themes and templates. Free, metadata only.
  • get_component returns a component's code, counted as paid retrieval.
  • generate writes new UI from a prompt with 21st AI, which needs credits.
  • search_logo finds brand SVG logos. Free.

The plans at the time of writing, from 21st.dev's pricing page: Free, with two copies a day; Builder at $6 a month billed yearly or $8 billed quarterly, with unlimited installs and MCP retrieval; and Builder + AI from $15 a month billed yearly for 500 credits.

Licensing is per component, because the authors are many. The terms say marketplace content belongs to its authors and 21st Labs, forbid redistributing it without authorization, and treat demos and previews as 21st's own work. Each component page shows a license field; some read MIT, some read unknown. Check that field before a client project.

Where a component registry stops#

Every component arrives with a default, and the defaults underneath this whole category are shared:

  • shadcn/ui's neutral theme sets --radius: 0.625rem and a primary of oklch(0.205 0 0).
  • Tailwind's transition utility applies cubic-bezier(0.4, 0, 0.2, 1) over 150ms unless you write something else.
  • Anthropic's frontend-design skill for Claude lists "the SaaS-card kit" among the traits AI-generated design clusters around: identical rounded cards, one radius on everything, and the same rgba(0,0,0,.1) shadow under each.

A registry with many authors adds the opposite problem. A hero from one author, a pricing table from a second and a footer from a third arrive with three easing curves, three radius scales and three ideas of how a section enters. You can see the seams, and why AI websites look the same traces where the shared defaults come from.

What fixes both is a set of decisions made once for the whole page: one curve at one duration for every structural move, a type scale with a ratio, a palette where each hex has a job, and a section order that carries the argument. Here is what that looks like on a developer tool, a SaaS product and an AI startup:

How we compared the alternatives#

We read each tool's own homepage, pricing page and license or terms on 9 November 2026, and we give a price only where we saw it there. We did not run a benchmark. Four questions decided what went into the table:

  1. What arrives. Code you install, a generated draft, or a written specification.
  2. What it decides for you. The palette, the type scale, the motion curve and its duration, the section order.
  3. What it costs at the time of writing, from the vendor's own page.
  4. What the license allows for paid client work.

The alternatives at a glance#

ToolWhat you getDecides the lookPrice at the time of writingLicense note
21st.devCommunity components, templates, MCPNo, varies by authorFree, 2 copies a day; Builder $6/mo yearlyPer component
shadcn/uiOpen-code components and blocksNeutral defaultsFreeMIT
Magic UIAnimated components; Pro templatesEffect defaultsFree; Pro $199 onceMIT (free tier)
Aceternity UIAnimated components, blocks, templatesEffect defaultsFree; $169 a year or $199 lifetimeClient work allowed, no resale
React BitsAnimated components and backgroundsEffect defaultsFree; paid ProMIT plus Commons Clause
Origin UI (coss ui)Application UI componentsNeutral defaultsFreeMIT
v0A generated page or appBy defaultFree with $5 credits; Plus $30/user/moSee Vercel's terms
AuraGenerated landing pages, HTML and Figma exportBy defaultFree tier without AI prompts; Pro $25/moCommercial use from Pro
ThanorA whole designed site, as a specificationYes, every valuePricing pageYours or clients'; no prompt resale

Read the third column. Libraries leave the look to you or hand you an effect's defaults, builders decide it for you without being asked, and only a specification decides it on purpose.

Free alternatives for primitives: shadcn/ui and Origin UI#

Both are free, MIT licensed and neutral on purpose. One is the foundation 21st.dev itself sits on; the other covers the controls inside a product.

shadcn/ui, best for owning the foundation#

shadcn/ui is the layer 21st.dev builds on: open-code components you copy into your project and own, MIT licensed, with more than 128,000 GitHub stars at the time of writing. Alongside the core components it now ships blocks, charts, a directory of third-party registries and a project creator.

  • Good at: accessible, composable primitives from one consistent author, and the registry format the whole ecosystem installs through.
  • Falls short: its defaults are deliberately neutral. The project creator starts on the Neutral base color with Inter for headings and body, so a page built only from it reads as a product dashboard until somebody decides otherwise.

Compared with 21st.dev, you trade breadth for consistency. Every component shares one radius scale, one set of tokens and one idea of focus states, which removes most of the seams problem. What it does not do is pick a look. Its theming page gives you the variables and leaves the values to you, which is exactly right for a foundation.

Price: free. When free parts are all a page needs is argued in paid prompts or free components.

Origin UI, now coss ui, best for application screens#

originui.com now redirects to coss ui, the design system Cal.com publishes on Base UI. The original Origin collection of copy-and-paste components still lives at coss.com/origin, grouped into accordions, buttons, calendars and date pickers, image croppers, file uploads and more. The repository is MIT licensed.

  • Good at: forms, date pickers, dialogs and uploads, the unglamorous controls a product actually needs.
  • Falls short: it is built for application screens and has little to say about a marketing page.

Compared with 21st.dev, this is the alternative for the inside of the product, where consistency matters more than character. Pair it with shadcn/ui and you have a complete app layer at no cost.

Price: free.

Free alternatives for motion: Magic UI and React Bits#

Both are free and both install through the shadcn registry. They differ in breadth, in how many parameters they expose, and in license.

Magic UI, best for animated effects#

Magic UI publishes more than 150 free, open-source animated components and effects in React, TypeScript, Tailwind CSS and Motion, MIT licensed, with over 23,000 GitHub stars. A component installs with npx shadcn@latest add @magicui/globe, and there is an official MCP server.

  • Good at: marquees, beams, text effects, device mocks and backgrounds that share one team's vocabulary.
  • Falls short: effects arrive with their own colors. Border Beam defaults to #ffaa40 into #9c40ff over 6 seconds, and Aurora Text cycles #FF0080, #7928CA, #0070F3 and #38bdf8.

Compared with 21st.dev, Magic UI is one library with one set of habits, so two of its effects sit together more comfortably than two from different authors. If what you came to 21st.dev for was motion, this is the closest free substitute.

Price: free; Pro is $199 once for the individual lifetime license, or $49 per template. Read more: Aceternity UI vs Magic UI.

React Bits, best for tunable backgrounds#

React Bits lists 216 animated components and backgrounds, installs them through the shadcn registry, and has more than 51,000 GitHub stars. Its homepage example adds a Gradient Waves background and sets it with real props: waveColor="#FF9FFC", amplitude={2.5}, speed={0.4}.

  • Good at: tunable backgrounds with the parameters exposed, plus free in-browser tools such as Background Studio.
  • Falls short: the license is MIT plus a Commons Clause. Commercial use inside your product is allowed; selling or redistributing the components themselves is not.

Compared with 21st.dev, React Bits is narrower and deeper: fewer kinds of thing, each with more knobs. The free libraries here, 21st.dev included, are the same set people name as free substitutes for paid prompt libraries, which MotionSites alternatives covers from the other side, and the Kinemble comparison sets them against a pack you buy once.

Price: free; a paid Pro library sells blocks and templates.

Aceternity UI: the alternative for finished landing-page blocks#

Aceternity UI has more than 100 free components, which its FAQ says you can use in personal and commercial projects, and a paid All-Access tier with over 200 premium blocks, more than 15 templates, five full landing pages and 16 micro-interactions.

  • Good at: hero sections and backgrounds that look finished on install, MCP access for Claude Code, Codex, Devin and Cursor even on the free plan, and Acebuilder, a beta AI builder that starts from its templates.
  • Falls short: its defaults lean where the category leans. Background Beams draws its gradient from #18CCFC through #6344F5 to #AE48FF, eased easeInOut.

Compared with 21st.dev, blocks are designed as whole sections by one team, so a page from one template holds together better than one assembled from five authors. The license allows unlimited end products for you or your clients and forbids reselling the items or building templates from them.

Price: $169 for a one-year license, $199 lifetime, $1,590 for a team of ten, all one-time payments at the time of writing.

Alternatives that generate: v0 and Aura#

Both write the page from a prompt instead of handing you parts, which is the job 21st AI and the MCP's generate tool do inside your editor.

v0, best for generating the section instead of copying it#

v0 by Vercel writes the component or the whole app from a prompt, deploys to Vercel and syncs with GitHub. The free plan includes $5 of one-time credits for new users, a visual Design Mode and seven messages a day; Plus is $30 per user per month at the time of writing.

  • Good at: going from a sentence to working code in your stack, then editing it visually.
  • Falls short: an unspecified request returns the model's defaults, so the page looks like what you failed to say.

Compared with 21st.dev's generator, which works inside your editor and is paid in 21st AI credits, v0 owns the whole loop, from prompt to deploy. Read more: v0 alternatives.

Aura, best for an exportable landing page#

Aura is an AI website and landing page builder that exports standard HTML, Tailwind CSS and vanilla JavaScript, or Figma layers. It lists more than 2,800 components and a library of DESIGN.md systems you can reference in a prompt with @.

  • Good at: landing pages with a visual editor, publishing and a CMS, and output you can take anywhere.
  • Falls short: the free plan includes no AI prompts and is for personal use only; commercial use starts on Pro.

Compared with 21st.dev, Aura is where you go when you want the page drafted for you rather than assembled. Price: Pro is $25 a month, or $12.50 a month on an annual promotion at the time of writing. Read more: Aura.build alternatives.

Thanor: the alternative for a whole designed site#

Thanor is a library of website designs, each shown as a live, moving preview and each with a long, exact prompt. You paste the prompt into Claude, ChatGPT, Gemini, Cursor, Lovable, v0 or Bolt, and the model builds that site, using hosted films, cut-outs and stills the built page draws on.

  • Good at: the decisions a registry leaves open, written as values: the palette in hex, the faces and the scale, spacing, easing curves with durations, the section order and every interaction.
  • Falls short: there is nothing to install and no code until a model writes it, and most designs need a paid plan.

Compared with 21st.dev, this is the other half of the job. You can keep shadcn/ui primitives under a Thanor design; the specification tells the model what they look like and how they move. The Thanor MCP plays the role for direction that the 21st MCP plays for parts: Claude, ChatGPT or Cursor searches the catalog and pulls a design's full art direction without the clipboard. It is listed in the Claude connectors directory and included in every paid plan, and the MCP servers worth adding for web design puts both in context.

Price: monthly, yearly and lifetime plans on the pricing page; some designs, including Vesperion, are free with an account.

How to choose a 21st.dev alternative#

If you are short ofTake
More parts from one consistent authorshadcn/ui, plus Origin UI for app screens
Free motion and effectsMagic UI or React Bits
Finished landing-page blocksAceternity UI
A first draft from a sentencev0, or Aura for an exportable landing page
A look that is not the defaultA written specification, which is what Thanor sells

Stay with 21st.dev if you want the widest catalog behind one search, several authors' takes on the same section, and an MCP that installs them from your editor. Nothing else on this page offers that breadth, and its Builder plan is inexpensive.

If your tokens are the real gap, design tokens for AI-built websites shows how to write them down before you install anything, and Tailwind UI alternatives covers the paid kits that used to fill this role.

The verdict on 21st.dev alternatives#

For parts, the free options are excellent and you do not need to pay anyone. shadcn/ui gives you a foundation you own, Magic UI and React Bits give you motion, Origin UI gives you the controls inside the product, and Aceternity UI sells blocks that hold together as sections. Each is genuinely best at its own thing, and each leaves your palette, type scale and timing to you.

For a first draft, v0 and Aura generate the page, and 21st.dev's own AI does the same inside your editor. They decide the look by default, which is fast, and which is also why their output converges.

What none of them provide is an art direction. That is why pages built from registries and builders resemble each other even when every component is good: the deciding never happened. If your page has to stand next to a competitor's and read as made on purpose, the missing piece is a specification with real values in it, the curve and its duration, the scale and its ratio, the hex and its role, the order of the sections. That is what a Thanor design is, and it works on top of the components you already like.

What to do next#

Open Vesperion and copy its prompt; it is free with an account. Paste it into the builder you already use, keep your shadcn/ui or 21st.dev parts underneath, and compare the section it builds with the one you have now. The difference you see is the deciding, done in advance.

When you want the rest, browse the library by the kind of site you are building.

Questions this raises

What is 21st.dev?

21st.dev is a community registry of React and Tailwind CSS components built to work with shadcn/ui. Many authors publish heroes, pricing sections, buttons, dialogs, templates, themes and shaders there, and the code is copied into your repository through the shadcn CLI rather than imported as a package. It also runs the 21st MCP, which lets coding agents search and install components, and a paid AI generator.

Is 21st.dev free?

Browsing is free, and the free plan lets you copy two components a day. At the time of writing the Builder plan removes the cap for 6 dollars a month billed yearly or 8 dollars billed quarterly, and includes unlimited component retrieval through the MCP. AI generation is a separate add-on paid in credits, starting at 15 dollars a month billed yearly for 500 credits.

What happened to 21st.dev Magic MCP?

Magic MCP is now the 21st MCP. The old @21st-dev/magic package still works as a thin proxy that forwards to the new server, but old Magic API keys were reset, so you need a new key from 21st.dev/mcp. Setup is one command through the 21st CLI, and the old /ui trigger phrase is no longer needed: you ask in plain language.

What is the best free alternative to 21st.dev?

It depends on what you came for. For consistent primitives from one author, shadcn/ui, which 21st.dev itself builds on. For free animated effects, Magic UI, which is MIT licensed, or React Bits. For application controls such as date pickers and file uploads, Origin UI, now part of coss ui. All of them leave the overall look of the page to you.

Can I use 21st.dev components in client projects?

Usually, but check each component. Licensing on 21st.dev is set per component because the authors are many, and each component page shows a license field: some read MIT, some read unknown. The terms also forbid redistributing marketplace content without authorization and treat the demos and previews as 21st's own work, separate from the code.

Part of

Alternatives, measured

Every library in this category, taken apart one at a time. What each one contains, what it costs, what it leaves out, and what you still have to decide yourself.