"use client"; import React, { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; /** * Tabs whose indicator travels between items instead of cutting. * * The pill is a single element shared across tabs via Framer's `layoutId`, so * the browser interpolates its position and width for us — no measuring * offsets, no resize listener, and it stays correct when labels change length * or wrap. */ export function AnimatedTabs({ tabs = [ { id: "overview", label: "Overview", body: "A shared layout pill glides between tabs." }, { id: "motion", label: "Motion", body: "Panels cross-fade with a small vertical offset." }, { id: "code", label: "Code", body: "No offset maths: layoutId does the interpolation." }, ], className = "", }: { tabs?: { id: string; label: string; body: string }[]; className?: string; }) { const [active, setActive] = useState(tabs[0]?.id); const current = tabs.find((t) => t.id === active) ?? tabs[0]; return (

{tabs.map((tab) => { const selected = tab.id === active; return ( ); })}

{current?.body}

); } export default AnimatedTabs;

Animated Tabs

Preview

Dependencies

Source