21st.dev - La librairie de composants qui change tout
Publié le - 4 février 2026 par Andy Cinquin
Hey ! Aujourd'hui je voulais vous parler d'un outil que j'utilise quotidiennement depuis quelques semaines et qui a littéralement changé ma façon de designer des interfaces complexes : 21st.dev !
C'est quoi 21st.dev ?
En gros, c'est une librairie de composants React communautaire, basée sur shadcn/ui. Mais attention, ce n'est pas une librairie classique où vous installez un package npm et vous vous retrouvez avec du code abstrait que vous ne pouvez pas modifier.
Non non, ici le concept est différent : le code est à vous !
L'idée c'est simple :
- Vous trouvez un composant qui vous plaît
- Vous cliquez sur un bouton
- Le composant est copié directement dans votre projet
- Vous pouvez le modifier comme bon vous semble
Et le meilleur ? C'est du Tailwind CSS et Radix UI sous le capot, donc vous savez exactement ce que vous manipulez !
Pourquoi c'est révolutionnaire ?
L'intégration avec les outils IA
Là où 21st.dev devient vraiment dingue, c'est son intégration avec les assistants IA comme Cursor, Windsurf, ou même Antigravity !
Quand vous trouvez un composant sur 21st.dev, vous avez deux options :
Option 1 : Le classique
pnpm dlx shadcn@latest add "https://21st.dev/r/username/component"
Option 2 : Le futur (ma préférée !)
Vous copiez le prompt fourni et vous le collez directement dans votre IDE IA. L'assistant comprend exactement comment installer et utiliser le composant dans votre projet !
Vous copiez le prompt fourni et vous le collez directement dans votre IDE IA. L'assistant comprend exactement comment installer et utiliser le composant dans votre projet !
C'est magique : vous copiez, vous collez dans Cursor, et BAM ! Le composant est intégré, configuré, et prêt à l'emploi. Plus besoin de lire la doc pendant 30 minutes pour comprendre comment ça marche ;)
Des composants de folie
La communauté a créé des composants vraiment impressionnants :
- Des héros animés avec des shaders
- Des boutons avec des effets 3D
- Des composants AI Chat prêts à l'emploi
- Des formulaires ultra-stylés
- Des calendriers, tables, modals...
Et le plus téléchargé ? Un robot 3D interactif ! Oui, vous avez bien lu :D
Comment je l'utilise au quotidien
Mon workflow est devenu super simple :
- Je cherche un composant sur 21st.dev (leur moteur de recherche est vraiment bon)
- Je prévisualise le composant en live sur leur site
- Je copie le prompt pour Cursor
- Je colle dans mon projet
- Je personnalise avec Tailwind si besoin
Ce qui me prenait parfois 2-3 heures (créer un composant from scratch, le styliser, gérer les états...) me prend maintenant 10 minutes. Et le résultat est souvent plus propre que ce que j'aurais fait moi-même !
Les points forts
- ✅ Gratuit pour la librairie de composants
- ✅ Open source au niveau des composants (le code est vraiment à vous)
- ✅ Tailwind CSS + Radix UI = stack moderne et accessible
- ✅ Intégration IA native (prompts pour Cursor, Windsurf, etc.)
- ✅ Communauté active qui upload de nouveaux composants régulièrement
- ✅ Searchable facilement par catégorie
Le Magic MCP (payant)
Ils ont aussi une fonctionnalité payante appelée "Magic" qui utilise le protocole MCP pour aller encore plus loin. Vous pouvez écrire des prompts comme
/ui create a sign up form et l'IA génère un composant basé sur leur registry.Personnellement je n'utilise pas cette feature car le tier gratuit me suffit amplement, mais si vous voulez aller plus loin, c'est une option intéressante !
Conclusion
Si vous faites du React avec Tailwind et que vous utilisez un IDE boosté à l'IA (Cursor, Windsurf, ou autre), foncez sur 21st.dev !
C'est vraiment le futur des librairies de composants : communautaire, modifiable, et parfaitement intégré avec les outils modernes de développement.
Et voilà, vous savez tout ! Maintenant à vous de jouer :D
Tips
- Commencez par explorer la section "Best of the Week" pour voir les meilleurs composants récents
- Utilisez les filtres par catégorie (Hero, Button, Card, etc.) pour trouver rapidement ce dont vous avez besoin
- N'hésitez pas à modifier les composants après installation, c'est fait pour ça !
🚀 Merci d'avoir lu jusqu'ici !
Si cet article vous a plu, partagez-le autour de vous.
💡 Une idée en tête ? Discutons-en !☕