Just copy-paste
real designs.
Find components, copy prompts, and ship polished UI with your AI agent.
Used by 4,293,289 builders. From indie makers to the world's largest product teams
Google
Meta
NVIDIA
ByteDance
Shopify
PayPalStartups:
Vercel
Lovable
Webflow
Razorpay
Mistral AI
Nubank
AtlassianMore than components
Whole templates, themes, live shaders and icons, from the same design engineers
Built for how you ship
Real source, saved where you can find it, installed from wherever you code
$ claude
✓ components/ui/animated-hero.tsx
✓ +148 lines, adapted to your theme
❯[Pasted text #1 +88 lines]
Claude Code
Paste it in the terminal and the source lands in your repo
Add the Animated Hero from 21st
acme/website · main
animated-hero.tsx+148 −12
+ export function AnimatedHero() {
+ return <section className="hero">…
<main>
− <OldHero />
+ <AnimatedHero />
Ready to reviewCreate PR
Codex
The same prompt as a task, and Codex ships it as a diff
Worked for 14s
✓Created src/components/AnimatedHero.tsx
✓Edited src/pages/Index.tsx
Preview updated
Lovable
Paste it in chat and 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 ButtonReal code, ready to ship
React and Tailwind on shadcn/ui conventions. Every component is source that lands in your repo, yours to edit
25,431
installs this week
Saved to bookmarks
Landing v212
Inspiration34
Create list
Number Ticker
12.4k454
Save it for later
Bookmark any component into your lists, your own or shared with your team, and pull it back up in one click
