Tabs

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

Make changes to your account here.

<Tabs defaultValue="account" className="w-full max-w-md">
  <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>

Installation

pnpm dlx cubix@latest add tabs

Usage

Import

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

Example

<Tabs defaultValue="account" className="w-full max-w-md">
  <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>

Examples

Line variant

Overview content.

<Tabs defaultValue="overview" className="w-full max-w-md">
  <TabsList variant="line">
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
    <TabsTrigger value="reports">Reports</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Overview content.</TabsContent>
  <TabsContent value="analytics">Analytics content.</TabsContent>
  <TabsContent value="reports">Reports content.</TabsContent>
</Tabs>

With icons

Profile preferences.

<Tabs defaultValue="profile" className="w-full max-w-md">
  <TabsList>
    <TabsTrigger value="profile"><UserIcon /> Profile</TabsTrigger>
    <TabsTrigger value="notifications"><BellIcon /> Notifications</TabsTrigger>
  </TabsList>
  <TabsContent value="profile">Profile preferences.</TabsContent>
  <TabsContent value="notifications">Notification settings.</TabsContent>
</Tabs>

Vertical

General settings.

<Tabs defaultValue="general" orientation="vertical" className="w-full max-w-lg">
  <TabsList>
    <TabsTrigger value="general">General</TabsTrigger>
    <TabsTrigger value="security">Security</TabsTrigger>
    <TabsTrigger value="billing">Billing</TabsTrigger>
  </TabsList>
  <TabsContent value="general">General settings.</TabsContent>
  <TabsContent value="security">Security settings.</TabsContent>
  <TabsContent value="billing">Billing settings.</TabsContent>
</Tabs>

Disabled tab

The active tab panel.

<Tabs defaultValue="active" className="w-full max-w-md">
  <TabsList>
    <TabsTrigger value="active">Active</TabsTrigger>
    <TabsTrigger value="disabled" disabled>Disabled</TabsTrigger>
  </TabsList>
  <TabsContent value="active">The active tab panel.</TabsContent>
  <TabsContent value="disabled">This panel cannot be selected.</TabsContent>
</Tabs>

API Reference

Note: Tabs follows the Tabs uses composable primitive names and renders slots for targeting: tabs, tabs-list, tabs-trigger, and tabs-content.

Tabs

Prop	Type	Default	Description
value	string	-	Controlled active tab value. Use with `onValueChange`.
defaultValue	string	-	Default active tab value for uncontrolled usage.
onValueChange	(value: string) => void	-	Called when a tab trigger selects a new value.
orientation	"horizontal" \| "vertical"	"horizontal"	The orientation of the tabs list and triggers.
className	string	-	Additional Tailwind classes merged with the root styles.

TabsList

Prop	Type	Default	Description
variant	"default" \| "line"	"default"	The visual style of the tabs list.
className	string	-	Additional Tailwind classes merged with the list styles.

TabsTrigger

Prop	Type	Default	Description
value	string	-	The tab value selected by this trigger.
disabled	boolean	false	Disables the trigger and prevents interaction.
className	string	-	Additional Tailwind classes merged with the trigger styles.

TabsContent

Prop	Type	Default	Description
value	string	-	The tab value that controls when this panel is shown.
className	string	-	Additional Tailwind classes merged with the content styles.