Anatomie

La section est divisée en trois zones. Un en-tête centré contient un badge optionnel, un titre et un sous-titre. En dessous, une rangée horizontale de boutons en forme de pilule affiche chaque langage avec un point coloré, son nom et une chaîne de version en monospace. L'onglet actif déclenche une carte animée qui possède elle-même trois sous-zones : une barre d'installation en haut (icône terminal, commande d'installation, boutons Copier et Docs), un bloc de code au milieu (pre monospace, bouton de copie flottant) et un pied de carte qui répète le nom du langage, le badge de version et rend un bouton CTA Installer.

Comment ça marche

Le changement de langage repose sur deux éléments de state : activeId (quel onglet est sélectionné) et copiedField (quel bouton de copie est dans son état 'copié'). Quand un onglet est cliqué, activeId se met à jour et AnimatePresence intercepte le panneau sortant, l'anime vers la sortie (opacity 0, y -8), puis monte le nouveau panneau (opacity 0, y 16 → 1, y 0). Le handler de copie appelle navigator.clipboard.writeText, assigne à copiedField une clé de chaîne ('install' ou 'code'), puis programme un setTimeout pour la réinitialiser. La constante d'ease [0.16, 1, 0.3, 1] est un cubic-bezier personnalisé qui donne aux transitions un ressenti rapide-à-la-sortie-lent-à-l'arrivée sans nécessiter un preset nommé.

Comment le coder en React

1. Définir la structure de données des langages

   Crée une interface SdkLanguage avec id, name, version, installCmd, code, un docsUrl optionnel et une chaîne color pour le point. Passe-la en prop avec des valeurs par défaut sensées pour que le composant fonctionne immédiatement. Garde les extraits de code comme template literals dans le tableau de données par défaut.

   interface SdkLanguage {
     id: string;
     name: string;
     version: string;
     installCmd: string;
     code: string;
     docsUrl?: string;
     color: string;
   }

2. Connecter le state des onglets et la logique de copie

   Initialise activeId avec l'id du premier langage et copiedField à null. Le callback handleCopy écrit dans le presse-papier, assigne à copiedField une clé de chaîne, et la réinitialise après 2000ms. Enveloppe-le dans useCallback pour éviter de le reconstruire à chaque rendu.

   const [activeId, setActiveId] = useState(languages[0]?.id ?? "");
   const [copiedField, setCopiedField] = useState<string | null>(null);
   
   const handleCopy = useCallback((text: string, field: string) => {
     navigator.clipboard.writeText(text).catch(() => {});
     setCopiedField(field);
     setTimeout(() => setCopiedField(null), 2000);
   }, []);

3. Animer le changement de panneau avec AnimatePresence

   Enveloppe le panneau actif dans AnimatePresence avec mode='wait'. Utilise l'id du langage comme key pour que React démonte l'ancien panneau avant de monter le nouveau. Définis initial à opacity:0, y:16, animate à opacity:1, y:0 et exit à opacity:0, y:-8 pour un glissement et fondu propre.

   <AnimatePresence mode="wait">
     {active && (
       <motion.div
         key={active.id}
         initial={{ opacity: 0, y: 16 }}
         animate={{ opacity: 1, y: 0 }}
         exit={{ opacity: 0, y: -8 }}
         transition={{ duration: 0.35, ease: [0.16, 1, 0.3, 1] }}
       >
         {/* install bar + code block + footer */}
       </motion.div>
     )}
   </AnimatePresence>

4. Construire la barre d'installation et le bloc de code

   La barre d'installation est une rangée flex : une icône Terminal et la installCmd dans un élément code monospace à gauche, et les boutons Copier et Docs optionnel à droite. Le bloc de code est une balise pre dans un div padded avec overflowX:auto et un bouton de copie flottant en haut à droite. Utilise des propriétés CSS personnalisées pour toutes les couleurs afin qu'il s'adapte à n'importe quel preset de thème.

Quand l'utiliser

Utilise cette section sur toute landing page de produit développeur où tu distribues des SDKs pour plusieurs langages et dois le prouver visuellement. Elle fonctionne bien dans un bloc 'Démarrez en 2 minutes', juste avant une section tarifs ou un CTA. Évite-la quand ton produit ne supporte qu'un seul langage ; un simple bloc de code avec bouton de copie est plus lisible. Sur mobile la rangée d'onglets se replie et le bloc de code défile horizontalement, ce qui convient pour la lecture mais n'est pas idéal pour l'onboarding, envisage une vue mobile simplifiée si les conversions y sont importantes.

Utilisé par

• Stripe, La référence API de Stripe utilise des onglets de langage (curl, Ruby, Python, PHP, Node, Go, .NET, Java) pour montrer la même requête dans chaque SDK, avec copie en un clic sur chaque extrait.
• Twilio, La documentation Twilio propose un sélecteur de langage persistant en haut des exemples de code, conservant le langage choisi d'une page à l'autre pour que les développeurs restent dans leur stack.
• Algolia, Les pages de documentation Algolia affichent des extraits d'installation multi-langage avec des onglets pour JavaScript, PHP, Python, Ruby, Go et d'autres, chacun avec un bouton de copie et un badge de version.
• Resend, La section de démarrage de Resend montre les commandes d'installation SDK pour Node, Python, Ruby, PHP, Go et Rust dans un bloc de code à onglets, le même pattern, appliqué à l'onboarding d'une API email.

FAQ