āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/adityakishore0/scrollx-ui/components/animated-tabs ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
<ComponentPreview name="animatedtabs-demo" className="" description="" />
<Step>Copy and paste the following code into your project.</Step>
<p> <code>animated-tabs.tsx</code> </p> <ComponentSource name="animated-tabs" /> </Steps> </TabsContent> </Tabs>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>
A headless and styled tab UI component set for switching content views.
<PropsTable rows={[ { prop: "defaultValue", type: "string", default: "required", description: "Initial active tab value. Used in: Tabs." }, { prop: "value", type: "string", default: "required", description: "Tab identifier. Used in: TabsTrigger (for selection), TabsContent (for matching)." }, { prop: "children", type: "ReactNode", default: "required", description: "Used as nested content or label. Required in: Tabs, TabsList, TabsTrigger, TabsContent." } ]} />
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā