React Components, Templates & Themes — 12,000+ Crafted UI | 21st | 21st
The living library of interfaces
12,000+ crafted React components, templates, and shadcn themes. Built by real design engineers.
2,000+ Marketing blocks:
Animated heroes Hero sections Shaders Liquid & metal Backgrounds Gradients Footers
Hero Section 5
Vercel Hero
118
Waitlist Hero
1.3k
Liquid Metal Hero
761
Hover Preview
363
Hero ASCII one
967
Vapour Text Effect
1.6k
Hover Footer
744
2,100+ UI components:
Buttons AI chats Cards & grids Galleries & 3D Navigation Sign ins & widgets Sections
Hover Button
386
Button Colorful with Hover Effect
564
Gradient Button
1.2k
Background Boxes
969
Background Beams
648
Not Found Page
122
Footer Section
1.3k
Horizon Hero Section
2.8k
Agent Plan
Used by 3,081,025 builders. From indie makers to the world's largest product teams
Google Meta NVIDIA ByteDance Shopify PayPal
Startups:
Vercel Lovable Webflow Razorpay Mistral AI Nubank Atlassian
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
acme/website · main
animated-hero.tsx +148−12
+ export function AnimatedHero() {
+ return
−
+
Ready to review Create 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.
codepreview
shimmer-button.tsx
1 import{cn} from"@/lib/utils"
3 export 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
11 Get started →
12
13 )
14 }
Shimmer Button
Get started →
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
455 Saved to bookmarks
Landing v213
Inspiration 34
Create list
Number Ticker
12.4k 455
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 UI 87 components](/content/community/manuarora700/library/aceternity-ui/index.html)
Magic UI 62 components](/content/community/dillionverma/library/magic-ui/index.html)
shadcn/ui 87 components](/content/community/shadcn/library/shadcn-ui/index.html)
Origin UI 44 components](/content/community/originui/library/origin-ui/index.html)
Geist 87 components](/content/community/shugar/library/geist/index.html)
Base UI 29 components](https://base-ui.21st.dev/)
Kokonut UI 49 components](/content/community/kokonutd/library/kokonut-ui/index.html)
8bitcn 106 components](/content/community/theorcdev/library/8bitcn/index.html)
Kibo UI 26 components](/content/community/haydenbleasel/library/kibo-ui/index.html)
visx 36 components](https://visx.21st.dev/)
ReUI 95 components](/content/community/sean0205/library/reui/index.html)
HextaUI 113 components](/content/community/preetsuthar17/library/hextaui/index.html)
Tailark 42 components](/content/community/meschacirung/library/tailark/index.html)
Shadcnblocks.com 39 components](/content/community/shadcnblockscom/library/shadcnblocks-com/index.html)
Ruixen UI 390 components](/content/community/ruixenui/library/ruixen-ui/index.html)
Efferd 100 components](/content/community/efferd/library/efferd/index.html)
UI TripleD 89 components](/content/community/moumensoliman/library/ui-tripled/index.html)
UI Layouts 72 components](/content/community/ui-layouts/library/ui-layouts/index.html)
Shailendra 51 components](/content/community/shailendrakumar19999/library/shailendra/index.html)
Jolly UI 51 components](/content/community/jolbol1/library/jolly-ui/index.html)
uimix 49 components](/content/community/lyanchouss/library/uimix/index.html)
ShadcnSpace 45 components](/content/community/shadcnspace/library/shadcnspace/index.html)
shadway 45 components](/content/community/shadway/library/shadway/index.html)
REAVIZ 41 components](/content/community/reaviz/library/reaviz/index.html)
reuno-ui 37 components](/content/community/reuno-ui/library/reuno-ui/index.html)
Motion Primitives 34 components](/content/community/ibelick/library/motion-primitives/index.html)
Systaliko UI 33 components](/content/community/youcefbnm/library/systaliko-ui/index.html)
lndev-ui 30 components](/content/community/ln-dev7/library/lndev-ui/index.html)
Fancy Components 30 components](/content/community/danielpetho/library/fancy-components/index.html)
coss 28 components](/content/community/coss.com/library/coss/index.html)
Cnippet 26 components](/content/community/cnippet_dev/library/cnippet/index.html)
PrebuiltUI 25 components](/content/community/prebuiltui/library/prebuiltui/index.html)
Circle 25 components](/content/community/ln-dev7/library/circle/index.html)
Spell 24 components](/content/community/tom_ui/library/spell/index.html)
Layouts 24 components](/content/community/0xUrvish/library/layouts/index.html)
Interfaces DS 23 components](/content/community/jshguo/library/interfaces-ds/index.html)
…and 700+ design engineers shipping shaders, interactions, and animated heroes.
Built by humans Ready for agents
Browse components Join for free
Questions, answered
Everything you need to know about the registry, installing components, and publishing your own.
01 What is 21st?+
21st is a community catalog of UI built by design engineers: React components, full templates, shadcn themes, shaders, and gradients. 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.
02 Is 21st 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.
03 How is this different from a React component library?+
A component library is one package with one aesthetic, installed as a dependency. 21st 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.
04 How 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. Prefer the classic way? Every component also comes with a shadcn CLI install command.
05 Do 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.
06 Can 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.
07 What are React templates on 21st?+
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.