The living library
of interfaces.

10,000+ crafted React & Tailwind CSS components. Built by real design engineers.

Used by 727,000+ builders. From indie makers to the world's largest product teams.

Google logoGoogleMeta logoMetaNVIDIA logoNVIDIAByteDance logoByteDanceShopify logoShopifyPayPal logoPayPal

Startups:

Vercel logoVercelLovable logoLovableWebflow logoWebflowRazorpay logoRazorpayMistral AI logoMistral AINubank logoNubankAtlassian logoAtlassian

Copy the prompt. Paste it anywhere.

Every component ships as a prompt. One copy — and it builds itself in whatever tool you live in.

$ claude
✓ components/ui/animated-hero.tsx
✓ +148 lines — adapted to your theme
❯[Pasted text #1 +88 lines]
Claude Code

Paste it in the terminal — the source lands in your repo.

Add the Animated Hero from 21st.dev
acme/website · main
animated-hero.tsx+148 −12
+ export function AnimatedHero() {
+ return <section className="hero">…
<main>
− <OldHero />
+ <AnimatedHero />
Ready to reviewCreate PR
Codex

Same prompt as a task — Codex ships it with a diff.

Worked for 14s
✓Created src/components/AnimatedHero.tsx
✓Edited src/pages/Index.tsx
Preview updated
Lovable

Paste it in chat — the exact UI appears in your project.

shimmer-button.tsx
1import { cn } from "@/lib/utils"
2 
3export function ShimmerButton() {
4 return (
5 <button className={cn(
6 "relative rounded-full bg-neutral-950",
7 "px-7 py-3 text-sm font-medium text-white",
8 "transition-transform hover:scale-105",
9 )}>
10 <span className="shimmer-ring" aria-hidden />
11 Get started →
12 </button>
13 )
14}
Shimmer Button
Real code, ready to ship

React + Tailwind, shadcn/ui conventions — every component is source that lands in your repo, yours to edit.

25,431
installs this week
454
Saved to bookmarks
Landing v212
Inspiration34
Create list
Ravi Katiyar

Number Ticker

12.4k454
Save it for later

Bookmark any component into your lists — personal or team-shared — and pull it back up in one click.

Built by real design engineers. Every component has an author. Indexed, searchable, one prompt away.

Aceternity UIAceternity UI87 componentsMagic UIMagic UI62 componentsshadcn/uishadcn/ui87 componentsOrigin UIOrigin UI44 componentsGeistGeist87 componentsBase UIBase UI29 componentsKokonut UIKokonut UI49 components8bitcn8bitcn106 componentsKibo UIKibo UI26 componentsvisxvisx36 componentsReUIReUI95 componentsHextaUIHextaUI113 componentsTailarkTailark42 componentsShadcnblocks.comShadcnblocks.com39 componentsRuixen UIRuixen UI390 componentsEfferdEfferd100 componentsUI TripleDUI TripleD89 componentsUI LayoutsUI Layouts72 componentsShailendraShailendra51 componentsJolly UIJolly UI51 componentsuimixuimix49 componentsShadcnSpaceShadcnSpace45 componentsshadwayshadway45 componentsREAVIZREAVIZ41 componentsreuno-uireuno-ui37 componentsMotion PrimitivesMotion Primitives34 componentsSystaliko UISystaliko UI33 componentslndev-uilndev-ui30 componentsFancy ComponentsFancy Components30 componentscosscoss28 componentsCnippetCnippet26 componentsPrebuiltUIPrebuiltUI25 componentsCircleCircle25 componentsSpellSpell24 componentsLayoutsLayouts24 componentsInterfaces DSInterfaces DS23 components

…and 700+ design engineers shipping shaders, interactions, and animated heroes.

Built by humans.
Ready for agents.

Browse components

Questions, answered.

Everything you need to know about the registry, installing components, and publishing your own.

01What is 21st.dev?

21st.dev is a community registry of React components and templates. Designers and engineers publish components they have built; you browse them, preview them live, and copy an AI-ready prompt that drops any component into your project through Cursor, Claude Code, v0, Lovable, or any other AI agent.

02Is 21st.dev free?

Yes. Browsing the whole registry is free, and you get 2 free component copies every day. Membership unlocks unlimited copies, 21st AI credits for generating and refining UI, and premium templates from their authors.

03How is this different from a React component library?

A component library is one package with one aesthetic, installed as a dependency. 21st.dev is a registry: many authors, many styles, and the code is copied into your repo rather than imported. You own it and can change it — there is no version of us to upgrade.

04How do I install a component?

Hit Copy prompt on any component and paste it into your AI tool — Cursor, Claude Code, v0, Lovable — and the agent rebuilds it inside your codebase, wired to your stack. That's how most people ship components from 21st.dev. Prefer the classic way? Every component also comes with a shadcn CLI install command.

05Do components work with shadcn/ui?

Yes. Components are published in the shadcn registry format and are built to compose with shadcn/ui primitives and your existing design tokens.

06Can I publish my own components?

Yes. Anyone can publish to the registry. You keep authorship, your components live on your public profile, and template authors can sell their work directly.

07What are React templates on 21st.dev?

Templates are complete, production-ready starting points — full pages and multi-page apps rather than single components. They are built by the same community of authors, and each one lists exactly what it includes before you buy.