Animated Tabs

Navigation 4

About

An animated tabs component with a sliding selection highlight, scrollable tab list with edge-fade arrows for overflow, and height-morphing content panels that smoothly resize between tabs.

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 { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";

export default function TabsDemo() {
  return (
    <Tabs defaultValue="overview" className="w-full max-w-md">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="activity">Activity</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">
        Track performance at a glance with key metrics and recent highlights.
      </TabsContent>
      <TabsContent value="activity">
        A running log of recent actions across your workspace.
      </TabsContent>
      <TabsContent value="settings">
        Manage preferences, notifications, and account details.
      </TabsContent>
    </Tabs>
  );
}