21st.dev : le design numéro un pour Claude Code

Le guide pour utiliser 21st.dev, récupérer les meilleurs composants du marché et les brancher sur Claude Code.

L'outil

21st.dev est une bibliothèque de composants React et Tailwind (plus de 10 000) rangés par catégorie. Tu choisis, tu récupères, tu colles dans ton projet.

Le site : https://21st.dev

Pourquoi ça change tout

Quand tu génères un site avec Claude Code ou Lovable, le design sort basique : sections plates, animations étranges, blocs mal alignés. On voit tout de suite que c'est une IA qui l'a fait.

Avec 21st.dev, tu pars des meilleurs composants du marché au lieu de laisser l'IA inventer un design.

Les catégories à regarder en premier

Catégorie	Ce que tu y trouves
Hero	la grande section du haut de page
Features	les blocs qui présentent ce que fait ton produit
Pricing	les tableaux de tarifs
Navbar / Footer	menus et bas de page
Testimonials	les avis clients
Buttons / Inputs	les petits éléments d'interface

Dans Features, tu as des dizaines de sections déjà stylées. Tu prends celle qui te plaît et tu la récupères.

Méthode 1 : à la main

Va sur https://21st.dev
Choisis une catégorie, par exemple Features.
Clique sur le composant qui te plaît.
Copie le code.
Colle-le dans ton projet, ou donne-le à Claude Code en lui disant où l'intégrer.

Méthode 2 : branché sur Claude Code

Tu récupères ta clé sur https://21st.dev/magic, puis tu installes le serveur MCP Magic :

npx @21st-dev/cli@latest install claude --api-key TA_CLE

Tu relances Claude Code, et ensuite tu demandes simplement :

Ajoute-moi une section Features avec trois colonnes et des icônes, prends un composant de 21st.dev

Claude va chercher le composant dans la bibliothèque et l'écrit directement dans ton code.

Les bons réflexes

Reste sur la même famille de composants sur tout le site : c'est ce qui donne l'air pro.
Garde une seule police et deux couleurs maximum.
Remplace les textes d'exemple avant de montrer ton site à quelqu'un.
Demande à Claude de vérifier le rendu sur mobile après chaque ajout.

Une question ? Réponds à ce message, j'te réponds en DM.