"use client";

import * as React from "react";
import { AnimatePresence, motion } from "framer-motion";
import { cn } from "@/lib/utils";

export interface MotionTabItem {
  value: string;
  label: string;
  content: React.ReactNode;
  disabled?: boolean;
}

interface MotionTabsProps extends React.HTMLAttributes<HTMLDivElement> {
  tabs: MotionTabItem[];
  defaultValue?: string;
  onValueChange?: (value: string) => void;
}

function MotionTabs({
  tabs,
  defaultValue,
  onValueChange,
  className,
  ...props
}: MotionTabsProps) {
  const initialValue = defaultValue ?? tabs[0]?.value ?? "";
  const [active, setActive] = React.useState(initialValue);

  React.useEffect(() => {
    if (defaultValue) setActive(defaultValue);
  }, [defaultValue]);

  const activeTab = tabs.find((tab) => tab.value === active) ?? tabs[0];

  const handleSelect = (value: string) => {
    setActive(value);
    onValueChange?.(value);
  };

  return (
    <div className={cn("w-full", className)} {...props}>
      <div className="flex flex-wrap items-center gap-2 rounded-full border border-border bg-muted p-1">
        {tabs.map((tab) => {
          const isActive = tab.value === active;
          return (
            <button
              key={tab.value}
              type="button"
              onClick={() => !tab.disabled && handleSelect(tab.value)}
              disabled={tab.disabled}
              className={cn(
                "relative rounded-full px-4 py-2 text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
                isActive
                  ? "text-foreground"
                  : "text-muted-foreground hover:text-foreground",
                tab.disabled && "opacity-50"
              )}
            >
              {isActive && (
                <motion.span
                  layoutId="motion-tab-indicator"
                  className="absolute inset-0 rounded-full bg-background shadow-sm"
                  transition={{ type: "spring", bounce: 0.2, duration: 0.4 }}
                />
              )}
              <span className="relative z-10">{tab.label}</span>
            </button>
          );
        })}
      </div>
      <div className="mt-4">
        <AnimatePresence mode="wait">
          <motion.div
            key={activeTab?.value}
            initial={{ opacity: 0, y: 8 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -8 }}
            transition={{ duration: 0.25, ease: "easeOut" }}
            className="rounded-xl border border-border bg-card p-5 text-card-foreground"
          >
            {activeTab?.content}
          </motion.div>
        </AnimatePresence>
      </div>
    </div>
  );
}

export { MotionTabs };
export type { MotionTabsProps };
Motion Tabs

Dependencies

Files

Installation
