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

import Tabs from "@/components/ui/tabs/Tabs.astro";
import TabsList from "@/components/ui/tabs/TabsList.astro";
import TabsTrigger from "@/components/ui/tabs/TabsTrigger.astro";
import TabsContent from "@/components/ui/tabs/TabsContent.astro";

Usage

import {
Tabs,
TabsList,
TabsTrigger,
TabsContent,
} from "@/components/ui/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