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.