Command Palette

Search for a command to run...

Tabs

animate-ui

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Account
Make changes to your account here. Click save when you're done.

import { Tabs, TabsList, TabsTrigger, TabsContents, TabsContent } from "@/registry/optics/tabs";import { Card } from "@/registry/optics/card";<Tabs defaultValue="account" className="w-[400px]">	<TabsList variant="default">		<TabsTrigger value="account">Account</TabsTrigger>		<TabsTrigger value="password">Password</TabsTrigger>	</TabsList>	<TabsContents>		<TabsContent value="account">			<Card>				<p>Make changes to your account here.</p>			</Card>		</TabsContent>		<TabsContent value="password">			<Card>				<p>Change your password here.</p>			</Card>		</TabsContent>	</TabsContents></Tabs>

Installation

pnpm dlx shadcn@latest add https://optics.agusmayol.com.ar/r/tabs.json

Props

<Tabs />
Name
Type
className
string
value
string
defaultValue
string
onValueChange
(value: string) => void
orientation
"horizontal" | "vertical"
dir
"ltr" | "rtl"

<TabsList />
Name
Type
className
string
variant
"default" | "outline" | "underline"
<TabsTrigger />
Name
Type
className
string
value
string (required)
disabled
boolean
<TabsContent />
Name
Type
className
string
value
string (required)
<TabsContents />
Name
Type
className
string
TableTextarea