@21st_dev

Building blocks for AI apps

San Francisco
Joined October 2025
A list of the best animation libraries ready to use in your React apps, save this 👇 > Fancy Components 21st.dev/@danielpetho/librar… > Systaliko UI 21st.dev/@youcefbnm/library/… > Spell 21st.dev/@tom_ui/library/spe… > Serenity UI 21st.dev/@ayushmxxn/library/… > SmoothUI 21st.dev/@educalvolpz/librar… > Aceternity UI 21st.dev/@manuarora700/libra… > Animate UI 21st.dev/@skyleen77/library/… > Hyperiux Vault 21st.dev/@hyperiux/library/h… We went through every animation library we could find and curated 41 of them into our collection of 12,000+ components on 21st 1. Open your project in claude/codex/cursor 2. Copy & paste the prompt for the component on 21st dev into your AI agent 3. See the animated component in your app! All 41 animation libraries + the full collection below ↓
1
3
13
2,742
If you use shadcn/ui for your apps, you're gonna love the UI components from these 8 libraries: 1. Kokonut UI 21st.dev/@kokonutd/library/k… 2. Efferd 21st.dev/@efferd/library/eff… 3. HextaUI 21st.dev/@preetsuthar17/libr… 4. ReUI 21st.dev/@sean0205/library/r… 5. Cult ui 21st.dev/@cult-ui/library/cu… 6. Kibo UI 21st.dev/@haydenbleasel/libr… 7. Dice UI 21st.dev/@diceui/library/dic… 8. Fluid Functionalism 21st.dev/@micka_design/libra… We tracked down 336 shadcn registries and curated the best of them into 12,000+ components onto our collection on 21st 1. Install @shadcn 2. Copy & paste the prompt for the component on 21st dev into your AI agent (claude/codex/cursor) 3. See the component in your app Full directory of all 336 shadcn registries + more below ↓
3
12
79
4,342
We've curated a library of 200+ carousels, made by the best design engineers & ui libraries across the internet Copy the prompt, paste it into your AI agent, and the carousel appears in your site Or give your agent access to the library via MCP, and it builds carousels like a design engineer would Ask your agent for: > "a coverflow carousel for my product screenshots" > "an infinite logo loop under the hero" > "a testimonial slider that autoplays" Carousels make a site look 10X polished, but they're a pain to build So most sites skip them, and without design taste, an AI agent ships the most generic ugly carousels on your site Access the library below 👇
1
2
10
981
Here's a list of the best UI libraries ready to use, save this 👇 1. Aceternity UI 21st.dev/@manuarora700/libra… 2. Kokonut UI 21st.dev/@kokonutd/library/k… 3. Ruixen UI 21st.dev/@ruixen.ui/library/… 4. Efferd 21st.dev/@efferd/library/eff… 5. Magic UI 21st.dev/@dillionverma/libra… 6. shadway 21st.dev/@moazamtrade/librar… 7. Fancy Components 21st.dev/@danielpetho/librar… 8. UI Layouts 21st.dev/@uilayout.contact/l… 9. Shadcnblocks 21st.dev/@shadcnblockscom/li… 10. Motion Primitives 21st.dev/@ibelick/library/mo… We went through thousands of UI libraries to curate a list of 12,000+ beautiful components + 140 UI libraries Copy & paste each component into your AI agent (claude/codex/cursor) to add into your app Full collection of all libraries and components below
14
24
2
268
13,684
Here's 8 React components you can paste into your app today to make it look 10x better: 1. Magnified Bento Card by @0xUrvish 2. Sign In Card by @preetsuthar17 3. File Tree Sidebar by @jatinyadav_05 4. Scroll Morph Hero by @laziedev 5. Password Strength Checker by @ozzyxs1a 6. AI Prompt Box by @easemize 7. Pricing by @CodeHagen 8. Notification Panel by Layro UI we went through thousands of UI libraries & creations by design engineers to curate a list of 12,000+ beautiful components for your apps, including these 8! copy + paste each component into your AI agent (claude/codex/cursor) to add into your app link below 👇
2
17
1,151
save this if you're about to add a hero section to your landing page we curated a library of 1000+ hero sections, made by the best design engineers and ui libraries across the internet your ai agent can browse the library + add it into your site the library has heroes like: > split heroes with image cards and device mockups > scroll-driven heroes, parallax and scroll-morph > big-type minimalist heroes with no image > gradient, aurora and glow backgrounds > image fans, editorial collages, cinematic 3d scenes no more ai slop landing pages. install below ↓
2
7
1,051
We've built a MCP that gives Claude Code, Cursor, and Codex design superpowers. Here's how it works: It connects your AI agent to 21st, a catalog of 12,000+ components, templates, and themes made by the best design engineers & ui libraries across the internet Right now every coding agent ships the same site: - The same ugly & generic gradients, ui components, logos, etc - That's AI slop, and it isn't the model's fault. It has just never seen what a professional would build instead, so it guesses every part from scratch. Think of it as a parts bin full of work by people who design for a living, and your agent reaches into it instead of guessing. Set it up with two lines in your terminal: 1. npx @21st-dev/cli@latest init 2. npx skills add 21st-dev/skill (swap claude for cursor or codex) Then ask for what you need, in plain words: - "Make my hero section like Linear's" - "Swap my pricing for one with a monthly/yearly toggle" - "Give this page a dark theme that isn't grey" - "make this submit button look better" What happens next: > your agent searches the 21st catalog via MCP and comes back with a few options, each with a preview and the name of the design engineer who made it (in Claude they show up as cards you can click through) > you pick one and it installs the source into your project, matched to your theme > the code lands in your repo, so "make it darker" or "drop the animation" works like any other ask Connect the 21st MCP to your AI agent, and it will generate like a professional designer Link to the mcp below 👇
11
1
1
9
1,277
We added 82 new components onto 21st this week, curated from the best design engineers & UI libraries > Copy the prompt for any of them > Paste it into your AI agent to add into your project You can find hero sections, carousels, pricing sections, shader and gradient backgrounds, sign-in pages, AI chat blocks, mechanical keyboards, and more! Link below 👇 Install the skill: npx skills add 21st-dev/skill
3
1
9
802
Shoutout to a couple of design engineers / ui libraries who made the list! @_hyperiux_ @laziedev @savvasicevs @msjmohabali @ayushmxxn @arunachalam1104 @AdiKodez @easemize @7ovrui
1
3
10
423