Tabs
Switch between views in the same context, built on the Base UI `Tabs` primitive.
Switch between views in the same context, built on the Base UI Tabs primitive.
Make changes to your account here.
tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@celestia-project/ui/primitive/tabs"
<Tabs defaultValue="account" className="w-80"> <TabsList> <TabsTrigger value="account">Account</TabsTrigger> <TabsTrigger value="password">Password</TabsTrigger> </TabsList> <TabsContent value="account">Make changes to your account here.</TabsContent> <TabsContent value="password">Change your password here.</TabsContent></Tabs>TabsList accepts variant="default" | "line" and size="sm" | "default" | "lg" (24px / 30px / 36px tall; heights apply to horizontal orientation only — vertical lists hug their content).
tsx
<TabsList size="sm"> <TabsTrigger value="account">Account</TabsTrigger> <TabsTrigger value="password">Password</TabsTrigger></TabsList><TabsList size="lg"> <TabsTrigger value="account">Account</TabsTrigger> <TabsTrigger value="password">Password</TabsTrigger></TabsList>| Prop | Type | Default |
|---|---|---|
variant | default | line | default |
size | sm | default | lg | default |