Tabs

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    <p>Make changes to your account here.</p>
  </TabsContent>
  <TabsContent value="password">
    <p>Change your password here.</p>
  </TabsContent>
</Tabs>

Installation

npx bearnie add tabs

Usage

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
} from "@/components/bearnie/tabs"

<Tabs defaultValue="tab1">
  <TabsList>
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">Content 1</TabsContent>
  <TabsContent value="tab2">Content 2</TabsContent>
</Tabs>

Examples

Default

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
    <TabsTrigger value="reports">Reports</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Overview content here.</TabsContent>
  <TabsContent value="analytics">Analytics content here.</TabsContent>
  <TabsContent value="reports">Reports content here.</TabsContent>
</Tabs>

Vertical

<Tabs defaultValue="general" orientation="vertical">
  <TabsList>
    <TabsTrigger value="general">General</TabsTrigger>
    <TabsTrigger value="security">Security</TabsTrigger>
    <TabsTrigger value="notifications">Notifications</TabsTrigger>
  </TabsList>
  <TabsContent value="general">General settings and preferences.</TabsContent>
  <TabsContent value="security">Security and privacy options.</TabsContent>
  <TabsContent value="notifications">Notification preferences.</TabsContent>
</Tabs>

With cards

<Tabs defaultValue="account" class="w-[400px]">
  <TabsList class="flex items-center">
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    <Card>
      <CardHeader>
        <CardTitle>Account</CardTitle>
        <CardDescription>Make changes to your account here.</CardDescription>
      </CardHeader>
      <CardContent class="space-y-2">
        <div class="space-y-1">
          <Label for="name">Name</Label>
          <Input id="name" value="Michael Andreuzza" />
        </div>
        <div class="space-y-1">
          <Label for="username">Username</Label>
          <Input id="username" value="@Mike_andreuzza" />
        </div>
      </CardContent>
      <CardFooter>
        <Button>Save changes</Button>
      </CardFooter>
    </Card>
  </TabsContent>
  <TabsContent value="password">
    <Card>
      <CardHeader>
        <CardTitle>Password</CardTitle>
        <CardDescription>Change your password here.</CardDescription>
      </CardHeader>
      <CardContent class="space-y-2">
        <div class="space-y-1">
          <Label for="current">Current password</Label>
          <Input id="current" type="password" />
        </div>
        <div class="space-y-1">
          <Label for="new">New password</Label>
          <Input id="new" type="password" />
        </div>
      </CardContent>
      <CardFooter>
        <Button>Save password</Button>
      </CardFooter>
    </Card>
  </TabsContent>
</Tabs>

Anatomy

Tabs - The root container that manages state
TabsList - Container for tab triggers
TabsTrigger - Individual tab buttons
TabsContent - Content panels for each tab

Props

Prop	Type	Default	Description
defaultValue	string	-	Initially active tab value
orientation	horizontal \| vertical	horizontal	Tab layout direction
class	string	-	Additional CSS classes

TabsTrigger

Prop	Type	Default	Description
value	string	required	Unique identifier for the tab
class	string	-	Additional CSS classes

TabsContent

Prop	Type	Default	Description
value	string	required	Matches the trigger value
class	string	-	Additional CSS classes