What Is 21st.dev and How Do Its Prompt-Based React Components Work?

21st.dev is a library of 12,000+ hand-crafted React and Tailwind CSS components, templates, and shadcn themes, built by design engineers. Its distinguishing feature is that every component ships as a prompt: you copy it and paste it into an AI coding tool (Claude Code, Codex, Lovable, or similar), and the tool writes the component's source code directly into your project. It's for React developers who want production-ready UI source they own and can edit, rather than a runtime dependency they import.

What's in the library

The catalog is organized into two broad buckets, plus templates and themes:

The site also indexes components from established community libraries alongside its own — Aceternity UI, Magic UI, shadcn/ui, Origin UI, Geist, Base UI, Kokonut UI, 8bitcn, Kibo UI, visx, ReUI, HextaUI, and others — so search results can surface a component regardless of which library originally authored it. Every component has a named author.

How the prompt workflow works

The core mechanic is the same across tools: copy the prompt, paste it where you build, get source code back.

1. Find a component. Browse or search the library, preview it live, and copy its prompt.
2. Paste into your tool. The site shows the same prompt being used three ways:
   • Claude Code — paste in the terminal; the source lands in your repo (the example shows components/ui/animated-hero.tsx, +148 lines, adapted to your theme).
   • Codex — paste as a task; it ships a diff (example: created src/components/AnimatedHero.tsx, edited src/pages/Index.tsx, preview updated).
   • Lovable — paste in chat; the UI appears in your project.
3. Review and edit. What you get is real code following React + Tailwind and shadcn/ui conventions — not a black-box import. It's yours to modify.

The practical difference from a traditional component library: instead of adding a package and importing a component whose internals you don't control, you get the source in your repo. The tradeoff is that you're responsible for maintaining that code, and the output depends on your AI tool correctly interpreting the prompt in your project's context.

Browsing and organizing

• Live preview before you commit to anything.
• Bookmarks and lists — save any component to a personal or team-shared list and pull it back up in one click.
• Install counts signal popularity (the site shows figures like "25,431 installs this week" on individual components).

Who it's for, and when to use it

Use 21st.dev if:

• You're building in React + Tailwind and want shadcn/ui-style source you can edit.
• You already work inside an AI coding tool and want a fast way to pull in polished UI.
• You want marketing sections (heroes, shaders, backgrounds) that are tedious to build from scratch.

A standard component library may fit better if:

• You want a stable versioned dependency with a documented API and no per-component code to maintain.
• You're not using an AI coding tool in your workflow — the prompt-copy step is the main delivery mechanism here.
• Your stack isn't React/Tailwind.

Practical notes

• The site lists a Pricing page, so some functionality may be gated — check it before assuming everything is free.
• Because components come from many authors and libraries, quality and conventions can vary; preview and skim the generated code before merging.
• The prompt adapts to your theme, but you should still verify it matches your design tokens and accessibility requirements.