Animated Tabs

Installation

npx shadcn@latest add https://ui.thilina.dev/r/animated-tabs.json

Usage

import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/animated-tabs";

export default function Page() {
  return (
    <Tabs defaultValue="account">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="billing">Billing</TabsTrigger>
      </TabsList>
      <TabsContent value="account">Account settings</TabsContent>
      <TabsContent value="billing">Billing details</TabsContent>
    </Tabs>
  );
}

A drop-in replacement for the shadcn/ui Tabs API. The active pill is a shared motion layer that glides between triggers, and switching tabs crossfades the incoming panel in with a slight rise.

Props

All four parts accept their Radix Tabs props unchanged (defaultValue, value, onValueChange, orientation, disabled on triggers, and so on). There is no extra API to learn; the motion is built in.

Accessibility

Radix Tabs underneath: role="tablist" wiring, arrow-key navigation, and automatic activation all behave exactly as in shadcn/ui. Under prefers-reduced-motion the pill jumps instantly and panels appear without the crossfade.