Tabs

Stable

A set of layered sections of content, displaying one panel of content at a time.

Examples

Default

Account Details

Make changes to your account here.
tsx
<Tabs defaultValue="account" className="w-[400px]">
  <TabsList className="grid w-full grid-cols-2">
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    <Card><CardHeader><CardTitle>Account Details</CardTitle></CardHeader></Card>
  </TabsContent>
  <TabsContent value="password">
    <Card><CardHeader><CardTitle>Security Settings</CardTitle></CardHeader></Card>
  </TabsContent>
</Tabs>

Neon Variant with Icons

System Core

tsx
<Tabs variant="neon" defaultValue="system" className="w-[400px]">
  <TabsList className="grid w-full grid-cols-3">
    <TabsTrigger value="system"><Terminal className="w-4 h-4 mr-2"/>Sys</TabsTrigger>
    <TabsTrigger value="network"><Activity className="w-4 h-4 mr-2"/>Net</TabsTrigger>
    <TabsTrigger value="security"><Shield className="w-4 h-4 mr-2"/>Sec</TabsTrigger>
  </TabsList>
  <TabsContent value="system">...</TabsContent>
</Tabs>

Underline Variant

Overview Content
tsx
<Tabs variant="underline" defaultValue="tab1" className="w-[400px]">
  <TabsList>
    <TabsTrigger value="tab1">Overview</TabsTrigger>
    <TabsTrigger value="tab2">Analytics</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">...</TabsContent>
</Tabs>

API Reference

PropertyDescriptionTypeDefault
variantVisual style for the tabs."default" | "neon" | "ghost" | "underline""default"
defaultValueThe value of the tab that should be active when initially rendered.string-
valueThe controlled value of the tab to activate.string-