Developer tools

21st.dev - AI Agent Registry, UI Components and SDK for Agent Apps

21st.dev is a community registry of UI built by design engineers: React components, full templates, shadcn themes, shaders and gradients. Its own summary of the model is the useful part — "Everything here is real,...

21st.dev - AI Agent Registry, UI Components and SDK for Agent Apps

21st.dev is a community registry of UI built by design engineers: React components, full templates, shadcn themes, shaders and gradients. Its own summary of the model is the useful part — “Everything here is real, working code — copy it into your project, own it, change it.”

The stack is React and TypeScript with Tailwind CSS, built around shadcn/ui primitives and your own design tokens, and the site states the components work with Next.js, Vite, Remix and Astro.

Copy-in, not dependency

The central design decision: “The code lands in your repo as your code.” Components are copied into your project rather than imported from a package.

This is the shadcn model, and it has a clear trade. You get full control — edit anything, no version conflicts, no runtime dependency on 21st — and you take on full maintenance, because there is no upstream to pull a bug fix from. For UI that you will restyle anyway, that is usually the right trade. For something you want patched for you, it is not.

Three ways in

Copy prompt. Each component has a prompt you paste into an AI tool — Cursor, Claude Code, v0 and Lovable are named — and the agent rebuilds the component in your codebase. This is the registry’s native idiom rather than a gimmick: the artefact being distributed is a description precise enough for a model to reconstruct against your conventions.

Agent CLI setup. For wiring an agent to the registry directly:

npx @21st-dev/cli@latest init --client <cursor|claude|codex|vscode|devin>

(windsurf remains an alias for devin.)

shadcn CLI. Each component also carries a shadcn CLI install command, for the conventional route.

Worth noting for agent work: the site exposes markdown versions of supported pages, reachable by appending .md or sending Accept: text/markdown, alongside an MCP setup, an OpenAPI 3.0 REST spec and an llms.txt summary. A registry that is machine-readable by design is still unusual, and it is the detail that makes it genuinely useful inside an agent workflow rather than only in a browser.

The commercial model, which the posts about this site often omit

Browsing is free. Copying is metered: free users get 2 component copies per day. Membership unlocks “unlimited copies and premium templates from their authors.” 21st AI — the generation and refinement feature — is a separate paid add-on with a monthly credit allowance. Templates are sold by their individual authors, each listing its contents before purchase.

That daily cap is the fact to know before you plan around it. Two copies a day is enough to evaluate the registry and wrong for building out a design system in an afternoon.

And the licence that is not stated

The site does not name a licence for the components or state terms of use. It says only that copied code is yours to edit with no runtime dependency.

For code you are pasting into a product, that gap matters more than it would for a hosted service. “Copy it into your project, own it” reads as permissive intent, but intent is not a licence, and the templates are sold by third-party authors who may attach their own terms. Check the individual component or template before shipping anything commercial on it.

Worth using for

Finding well-made components and getting them into a Tailwind/shadcn project quickly, especially through an agent. The machine-readable surface and the copy-prompt approach are a better fit for how UI actually gets assembled now than a component library you import and then fight.

Treat the free tier as evaluation rather than a workflow — two copies a day will not carry a build-out — and settle the licensing question on anything that ships to customers.

Open on 21st.dev

Share

XLinkedIn