Animated Tabs

A headless and styled tab UI component set for switching content views.

Profile

Update your personal information here.

Full Name

Installation

npx shadcn@latest add https://scrollx-ui.vercel.app/registry/animated-tabs.json

Usage

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

<Tabs defaultValue="profile" className="w-[400px]">
  <TabsList>
    <TabsTrigger value="profile">Profile</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="profile">Make changes to your profile here.</TabsContent>
  <TabsContent value="settings">Look at your settings here.</TabsContent>
</Tabs>

API Reference

Tabs

A headless and styled tab UI component set for switching content views.

Props

Property	Type	Default	Description
`defaultValue`	string	`required`	Initial active tab value. Used in: Tabs.
`value`	string	`required`	Tab identifier. Used in: TabsTrigger (for selection), TabsContent (for matching).
`children`	ReactNode	`required`	Used as nested content or label. Required in: Tabs, TabsList, TabsTrigger, TabsContent.