Skip to content

21st.dev alternative: Arc vs 21st.dev

21st.dev is a community marketplace of React and Tailwind components that you copy into your project. Arc is a single, curated library of components and blocks with one design system, a shadcn registry and its own MCP server.

On this page
  1. The short version
  2. Fact table
  3. Where they differ
  4. Which to choose
  5. Using both
  6. Install
  7. Frequently asked questions

The short version

If you searched for a 21st.dev alternative, the first thing to know is that the two are different kinds of product. 21st.dev is a registry and marketplace with thousands of components from many authors. Arc is one library with one set of tokens and rules.

That makes the trade-off variety against consistency. Both install through the shadcn CLI and both offer an MCP server, so the choice is mostly about whether you want a catalog to browse or a system to build on.

We make Arc, so read this with that in mind. Every fact about 21st.dev below comes from their own site, docs, npm package or repository, and we say where the other library is the better pick.

Fact table

Arc and 21st.dev compared
TopicArc21st.dev
What it isReact components and blocks for product interfaces, built to work with AI coding agentsCommunity registry and marketplace of React and Tailwind components
StackReact, TypeScript, CSS Modules with CSS variables, Motion. Tailwind is optional.React and Tailwind CSS components from many authors
Size161 components and 91 blocks (110 components and 22 blocks are free)12,000+ components, plus templates, themes, shaders and gradients
LicenseMIT for free items. Arc Pro license for Pro items: unlimited projects, no reselling the source as a kit.Not stated on their homepage. Check the component you copy.
Free and paidFree components and a starter set of blocks. Pro is $199 once, or $129 a year. Team is $599 once for up to 10 people.Free tier with 2 component copies a day. Paid plans add unlimited installs; see their pricing page for current prices.
Installnpx shadcn@latest add @uiarc/buttonshadcn CLI, or copy a prompt into Cursor or Claude Code
MotionMotion with shared spring presets. Components include a reduced motion branch.Varies by author
MCP and AI supportRemote MCP server (sign in with a free account), llms.txt and llms-full.txt, markdown for every component, an agent skill.21st MCP (formerly Magic MCP) and the @21st-dev/cli installer. It needs an API key: search is free, retrieving component code is metered by plan.
Best forProduct UI such as dashboards, settings, forms, tables and onboarding, with motion built inVariety: many authors, many styles, and a place to publish your own

Last verified October 13, 2026. Arc facts are read from Arc itself. For 21st.dev, see 21st.dev for anything that has changed, especially prices.

Where they differ

Many authors or one

On 21st.dev each component comes from its author, so styles, quality and conventions vary. That is the appeal for inspiration and unusual pieces. In Arc every component shares tokens, themes, keyboard behavior and motion presets, which keeps a product looking like one thing.

Licensing

21st.dev's homepage says the code is yours once you copy it, but it does not state one license for the catalog, so check the component you plan to ship. Arc's free items are MIT licensed and Pro items share one license.

Stack

21st.dev lists its components as React and Tailwind CSS. Arc components use CSS Modules and CSS variables, so Tailwind is optional.

Pricing

21st.dev has a free tier with 2 component copies a day, and paid plans for unlimited installs and MCP retrieval; its pricing page listed Builder at $6 a month billed yearly when we checked. Free Arc items install from a public registry with the shadcn CLI and need no account. Arc Pro is $199 once or $129 a year, and the team plan is $599 once for up to 10 people.

MCP and AI support

21st MCP, formerly Magic MCP, searches the catalog and retrieves component code, and it uses an API key. Arc's MCP tools return when to use a component and when not to, its props, keyboard behavior, accessibility and motion notes, and the install command, and an agent skill adds Arc's design rules. Arc's server asks you to sign in with a free account.

Publishing

21st.dev lets you publish your own components and be discovered. Arc is not a marketplace: it is one library maintained by Arc, and there is no way to publish into it.

Which to choose

Choose 21st.dev if

  • You want variety, inspiration, or one specific community-made component.
  • You want to publish your own components and get them in front of other developers.
  • Your project uses Tailwind CSS and you are comfortable reviewing each component's code and license.

Choose Arc if

  • You want one consistent system with shared tokens, light and dark themes and accent colors.
  • You want predictable keyboard, accessibility and motion behavior across every component.
  • You do not want Tailwind as a dependency.
  • You want your coding agent to read usage guidance, not only search a catalog.

Using both

They work together. Use 21st.dev when you need something unusual and Arc for the core of the product. Because 21st components are Tailwind based, that part of the project needs Tailwind, and each library keeps its own tokens, so check both themes after mixing.

Install

Both install with the shadcn CLI. Register Arc once in components.json, then install by name.

components.json
{  "registries": {    "@uiarc": "https://uiarc.dev/r/{name}.json"  }}
Terminal
# Arcnpx shadcn@latest add @uiarc/button # 21st.dev: set up the MCP server and CLI for your editornpx @21st-dev/cli@latest init --client claude

Frequently asked questions

Is 21st.dev free?

Browsing is free and the free tier includes 2 component copies a day. Paid plans add unlimited installs and MCP component retrieval. Prices change, so check their pricing page.

Is Arc a good 21st.dev alternative for Claude Code and Cursor?

Both work with Claude Code and Cursor. 21st MCP searches a large community catalog. Arc's server at https://uiarc.dev/api/mcp searches one curated library and returns usage guidance, props and install commands for each item.

Can I use 21st.dev components and Arc together?

Yes. Both install with the shadcn CLI. 21st.dev components are Tailwind based, so that part of the project needs Tailwind, and Arc components bring their own CSS. Check light and dark themes after mixing.

Who owns the code I copy from 21st.dev?

Their homepage says you copy the code into your project and own it. It does not state a single license for the catalog, so read the license and author of any component before you ship it.

Can I publish components to Arc?

No. Arc is a single library, not a marketplace. If you want to publish and share components, 21st.dev is built for that.

More comparisons and guides