Anatomy

The section is divided into three zones. A centered header holds an optional badge, a heading, and a subtitle. Below it, a horizontal row of pill-shaped tab buttons shows each language with a color dot, its name, and a monospaced version string. The active tab triggers an animated card that itself has three sub-zones: an install bar at the top (terminal icon, install command, Copy and Docs buttons), a code block in the middle (monospaced pre, floating copy button), and a footer that repeats the language name plus version badge and renders an Install CTA button.

How it works

Language switching relies on two pieces of state: activeId (which language tab is selected) and copiedField (which copy button is in its 'copied' state). When a tab is clicked, activeId updates and AnimatePresence catches the outgoing panel, animates it out (opacity 0, y -8), then mounts the new panel (opacity 0, y 16 → 1, y 0). The copy handler calls navigator.clipboard.writeText, sets copiedField to a string key ('install' or 'code'), then schedules a setTimeout to clear it. The ease constant [0.16, 1, 0.3, 1] is a custom cubic-bezier that gives transitions a fast-out-slow-in feel without needing a named preset.

How to build it in React

1. Define the language data shape

   Create an SdkLanguage interface with id, name, version, installCmd, code, an optional docsUrl, and a color string for the dot. Feed it as a prop with sensible defaults so the component works out of the box. Keep actual code snippets as template literals in the default data array.

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

2. Wire up the tab state and copy logic

   Initialize activeId to the first language's id and copiedField to null. The handleCopy callback writes to the clipboard, sets copiedField to a string key, and clears it after 2000ms. Wrap it in useCallback so it doesn't rebuild on every render.

   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. Animate the panel swap with AnimatePresence

   Wrap the active panel in AnimatePresence with mode='wait'. Use the language id as the key so React unmounts the old panel before mounting the new one. Set initial to opacity:0, y:16, animate to opacity:1, y:0, and exit to opacity:0, y:-8 for a clean slide-and-fade.

   <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. Build the install bar and code block

   The install bar is a flex row: a Terminal icon plus the installCmd in a monospace code element on the left, and Copy plus optional Docs link buttons on the right. The code block is a pre tag inside a padded div with overflowX:auto and a floating copy button in the top-right corner. Use CSS custom properties for all colors so it adapts to any theme preset.

When to use it

Reach for this section on any developer product landing page where you ship SDKs for multiple languages and need to prove it visually. It works well in a 'Get started in 2 minutes' block, just before a pricing section or a CTA. Skip it when your product only supports one language; a plain code block with a copy button is cleaner. On mobile the tab row wraps and the code block scrolls horizontally, which is fine for reading but not ideal for onboarding, consider a simplified mobile view if conversions matter there.

Used by

• Stripe, Stripe's API reference uses language tabs (curl, Ruby, Python, PHP, Node, Go, .NET, Java) to show the same request across every SDK, with one-click copy on each snippet.
• Twilio, Twilio's docs feature a persistent language selector at the top of code examples, keeping the chosen language across page navigation so developers stay in their stack.
• Algolia, Algolia's documentation landing pages display multi-language install snippets with tabs for JavaScript, PHP, Python, Ruby, Go and others, each with a copy button and a version badge.
• Resend, Resend's getting-started section shows SDK install commands for Node, Python, Ruby, PHP, Go and Rust in a tabbed code block, the same pattern, applied to email API onboarding.

FAQ