"use client"; import { useCallback, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore, type CSSProperties, type ReactNode, } from "react"; export type AnimatedTab = { /** Stable identifier; also used as the `value` / `defaultValue` match. */ value: string; /** Trigger label. */ label: ReactNode; /** Panel content rendered when this tab is active. */ content: ReactNode; }; /** * Panel transition mode. * - `basic` (default): horizontal carousel slide — panels live in a track * that translates, the old panel slides off-screen as the new one arrives. * - `blur`: stacked panels, no slide. Crossfade with a soft blur on the * outgoing/incoming halves. */ export type AnimateMode = "basic" | "blur"; export type AnimatedTabsProps = { /** Tabs to render. The first tab is the default when `defaultValue` is omitted. */ tabs: AnimatedTab[]; /** Initially selected tab `value` (uncontrolled). */ defaultValue?: string; /** Selected tab `value` (controlled). */ value?: string; /** Called whenever the selected tab changes. */ onValueChange?: (value: string) => void; /** Transition mode between panels. @default "basic" */ animate?: AnimateMode; /** Extra class names merged onto the root card. */ className?: string; }; const subscribeNoop = () => () => {}; function useIsHydrated(): boolean { return useSyncExternalStore(subscribeNoop, () => true, () => false); } export function AnimatedTabs({ tabs, defaultValue, value: controlled, onValueChange, animate = "basic", className, }: AnimatedTabsProps) { const [internal, setInternal] = useState( defaultValue ?? tabs[0]?.value ?? "", ); const current = controlled ?? internal; const activeIdx = Math.max( 0, tabs.findIndex((t) => t.value === current), ); const isCarousel = animate === "basic"; const triggerRefs = useRef>([]); const panelRefs = useRef>([]); const [indicator, setIndicator] = useState({ left: 0, width: 0, visible: false, }); const [stageHeight, setStageHeight] = useState(); const hydrated = useIsHydrated(); useLayoutEffect(() => { const el = triggerRefs.current[activeIdx]; if (el) { setIndicator({ left: el.offsetLeft, width: el.offsetWidth, visible: true, }); } }, [activeIdx]); const measureActive = useCallback(() => { const el = panelRefs.current[activeIdx]; if (el) setStageHeight(el.offsetHeight); }, [activeIdx]); useLayoutEffect(() => { measureActive(); }, [measureActive]); useEffect(() => { if (typeof ResizeObserver === "undefined") return; const el = panelRefs.current[activeIdx]; if (!el) return; const ro = new ResizeObserver(() => measureActive()); ro.observe(el); return () => ro.disconnect(); }, [activeIdx, measureActive]); const setValue = (next: string) => { if (controlled === undefined) setInternal(next); onValueChange?.(next); }; const stageStyle: CSSProperties | undefined = stageHeight !== undefined ? { height: stageHeight } : undefined; const trackStyle: CSSProperties = isCarousel ? { transform: `translate3d(-${activeIdx * 100}%, 0, 0)` } : {}; // Stacked (blur) mode: once we've measured the active panel, we promote // inactive panels to `position: absolute` so the stage height tracks only // the active panel — not the tallest. Pre-measure, only the active panel // renders so the stage gets a sensible natural height to start from. const useStackedAbsolute = !isCarousel && hydrated && stageHeight !== undefined; return (

{tabs.map((tab, i) => { const isActive = i === activeIdx; return ( ); })}

{isCarousel ? (

{tabs.map((tab, i) => { const isActive = i === activeIdx; if (!hydrated && !isActive) return null; return (

{ panelRefs.current[i] = el; }} className={[ "w-full min-w-0 shrink-0 basis-full", isActive ? "pointer-events-auto" : "pointer-events-none", ].join(" ")} > {tab.content}

); })}

) : (

{tabs.map((tab, i) => { const isActive = i === activeIdx; // Until we've measured the active panel, render only it in flow // so the stage has a sensible natural height. if (!useStackedAbsolute && !isActive) return null; return (

{ panelRefs.current[i] = el; }} className={[ useStackedAbsolute ? "absolute inset-x-0 top-0" : "relative", "w-full min-w-0", isActive ? "pointer-events-auto" : "pointer-events-none", ...panelEffectClasses(animate, isActive), ] .filter(Boolean) .join(" ")} > {tab.content}

); })}

)}

); } function panelEffectClasses(mode: AnimateMode, isActive: boolean): string[] { if (mode === "basic") return []; // blur — stacked crossfade with a soft blur on the inactive half. return [ "transition-[opacity,filter] duration-[400ms] ease-[cubic-bezier(0.16,1,0.3,1)]", isActive ? "opacity-100 blur-0 z-10" : "opacity-0 blur-sm", ]; }

Animated Tabs

Customize

Usage