@21st_devi
iAccount based inUnited States
About this account
- Account based in
- United States
- Connected via
- Web
Account-level information from X, not a live location or the device used for a specific post.
Building blocks for AI apps
San Francisco
Joined October 2025
- Tweets152
- Following2
- Followers3.2K
- Likes218
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 ↓
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 ↓
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 👇
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
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 👇
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 ↓
Browse the library + use the mcp 👇
21st.dev/?utm_source=x&utm_c…
Thank you to Punit Dhiman for creating this!
21st.dev/?utm_source=x&utm_c…
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 👇
Install the MCP + Browse the entire library:
21st.dev?utm_source=x&utm_ca…
credit to @ruixen_ui for this beauty 🫶
grab the component here:
21st.dev/@ruixen.ui/componen…
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
Shoutout to a couple of design engineers / ui libraries who made the list!
@_hyperiux_ @laziedev @savvasicevs @msjmohabali @ayushmxxn @arunachalam1104 @AdiKodez @easemize @7ovrui