Animated Tabs

Navigation 51

About

Animated tabs component with a smooth sliding indicator, offering underline, pill, and segment variants with icon support and full keyboard navigation.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Animated Tabs to your project and fits it to your theme.

Code

How Animated Tabs is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import AnimatedTabs from "@/components/ui/animated-tabs";
import { useState } from "react";

const tabs = [
  { id: "home", label: "Home" },
  { id: "profile", label: "Profile" },
  { id: "settings", label: "Settings" },
];

export default function AnimatedTabsDemo() {
  const [activeTab, setActiveTab] = useState("home");

  return (
    <div className="flex flex-col items-center gap-8">
      <AnimatedTabs
        activeTab={activeTab}
        layoutId="underline-demo"
        onChange={setActiveTab}
        tabs={tabs}
        variant="underline"
      />

      <AnimatedTabs
        activeTab={activeTab}
        layoutId="pill-demo"
        onChange={setActiveTab}
        tabs={tabs}
        variant="pill"
      />

      <AnimatedTabs
        activeTab={activeTab}
        layoutId="segment-demo"
        onChange={setActiveTab}
        tabs={tabs}
        variant="segment"
      />
    </div>
  );
}