Explorer
KNOW-PAT-191

21st.dev — Registry community components et Magic MCP

Domaine
web-uiux
Type
pattern
Priorité
P1

Parent : [[INDEX-WEB-UIUX]]

21st.dev — Registry community components et Magic MCP

Règle d'or : Quand l'utilisateur demande un composant React, une landing page, un template ou une inspiration UI, l'IA doit considérer 21st.dev comme source de composants réels et production-ready avant de réinventer un composant générique.

Qu'est-ce que 21st.dev ?

21st.dev est un registry communautaire de composants React et templates hand-crafted. Objectif : partir de vraies UI polies plutôt que de la moyenne IA générique, et shipper des produits qui ont une identité visuelle propre.

Site officiel : https://21st.dev

Offres principales

1. Community Registry

URL : https://21st.dev/community

2. Magic Chat / Magic MCP

URL : https://21st.dev/magic

Agent IA qui génère plusieurs variantes de style pour chaque composant demandé. Disponible via :

Workflow :

  1. Décrire le composant (pricing table, contact form, hero section)
  2. Magic génère plusieurs styles
  3. Comparer et choisir
  4. Le code choisi est intégré automatiquement dans le projet avec ses dépendances

Commande web : /ui <description du composant>

3. MCP Server

URL : https://21st.dev/mcp

Outils exposés au MCP :

Tool Usage
Inspiration Search Recherche sémantique dans les milliers de composants de la communauté
SVG Icon Search Recherche de logos SVG de marques via svgl (https://svgl.app)
Magic Generate Génère 5 variantes UI polies d'un composant ; le choix est renvoyé automatiquement à l'agent

Installation MCP : choisir l'IDE sur https://21st.dev/mcp et suivre les instructions.

Tarification

  • Free : 100 crédits/mois, inspirations illimitées, recherche SVG illimitée, support communautaire
  • Pro : 400 crédits/mois + clone site + support prioritaire
  • Max : 2000 crédits/mois + early access + support prioritaire

Méthodologie d'utilisation

Avant de coder un composant

  1. Décrire le besoin en termes de composant (pas de "fais-moi un beau truc")
  2. Rechercher sur 21st.dev /community par catégorie ou via Inspiration Search MCP
  3. Si besoin de variations : utiliser Magic Generate
  4. Adapter le composant choisi au design system du projet (KNOW-PAT-144, KNOW-PAT-190, KNOW-PAT-192)
  5. Appliquer KNOW-PAT-143 et KNOW-PAT-155 avant de shipper

Quand l'utiliser

  • Hero sections, CTAs, backgrounds, features, pricing tables, forms, modals
  • Templates complets (Next.js, React, etc.)
  • Recherche d'icônes / logos de marques (SVGL)
  • Génération de variantes pour un même composant

Anti-patterns à éviter

  • ❌ Copier un composant sans l'adapter au design system du projet
  • ❌ Ignorer les dépendances introduites par un composant 21st.dev
  • ❌ Utiliser un composant sans vérifier la licence et les crédits requis
  • ❌ Ne pas tester le responsive du composant importé

Références