Tabs

Tab component for organizing content into multiple panels. Supports multiple variants including default, underline, filled, color, filter, and select styles.

Installation

The Tabs component is part of the design system. Import it from the UI package.

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

Usage

Use Tabs with TabsList, TabsTrigger, and TabsContent. Copy the example below to get started.

<Tabs defaultValue="tab1">
  <TabsList>
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
    <TabsTrigger value="tab3">Tab 3</TabsTrigger>
  </TabsList>
</Tabs>

Variants

Tabs component supports multiple visual variants to match different use cases.

Default

Standard tabs with rounded corners. Selected tab has primary blue background.

<Tabs defaultValue="activity" variant="default">
  <TabsList>
    <TabsTrigger value="activity">Activity history</TabsTrigger>
    <TabsTrigger value="access">Access history</TabsTrigger>
    <TabsTrigger value="excel">Excel Download History</TabsTrigger>
  </TabsList>
</Tabs>

Default with Icon

Default variant with icon support. Icons can be placed on the left or right.

<Tabs defaultValue="activity" variant="default">
  <TabsList>
    <TabsTrigger value="activity" icon="check-circle">Activity history</TabsTrigger>
    <TabsTrigger value="access">Access history</TabsTrigger>
    <TabsTrigger value="excel">Excel Download History</TabsTrigger>
  </TabsList>
</Tabs>

Underline

Tabs with underline indicator. Selected tab shows a blue underline.

<Tabs defaultValue="msqp" variant="underline">
  <TabsList>
    <TabsTrigger value="msqp">MSQP</TabsTrigger>
    <TabsTrigger value="p2u">P2U</TabsTrigger>
  </TabsList>
</Tabs>

Filled

Tabs with filled background. Selected tab has white background with blue text.

<Tabs defaultValue="msqp" variant="filled">
  <TabsList>
    <TabsTrigger value="msqp">MSQP</TabsTrigger>
    <TabsTrigger value="p2u">P2U</TabsTrigger>
  </TabsList>
</Tabs>

Color

Tabs with colored background. Selected tab has primary blue background with white text.

<Tabs defaultValue="msqp" variant="color">
  <TabsList>
    <TabsTrigger value="msqp">MSQP</TabsTrigger>
    <TabsTrigger value="p2u">P2U</TabsTrigger>
  </TabsList>
</Tabs>

Filter

Filter-style tabs with borders. Each tab looks like a button with border.

<Tabs defaultValue="all" variant="filter">
  <TabsList>
    <TabsTrigger value="all">All</TabsTrigger>
    <TabsTrigger value="today">Today</TabsTrigger>
    <TabsTrigger value="yesterday">Yesterday</TabsTrigger>
    <TabsTrigger value="week">1 Week</TabsTrigger>
    <TabsTrigger value="month">1 Month</TabsTrigger>
    <TabsTrigger value="quarter">3 Month</TabsTrigger>
  </TabsList>
</Tabs>

Select

Connected tabs with shared borders, similar to a segmented control.

<Tabs defaultValue="individual" variant="select">
  <TabsList>
    <TabsTrigger value="all">All</TabsTrigger>
    <TabsTrigger value="individual">Individual</TabsTrigger>
    <TabsTrigger value="corporate">Corporate</TabsTrigger>
  </TabsList>
</Tabs>

Examples

Controlled

const [activeTab, setActiveTab] = useState("tab1")

<Tabs value={activeTab} onValueChange={setActiveTab}>
  <TabsList>
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
  </TabsList>
</Tabs>

API Reference

The Tabs component organizes content into switchable panels. It supports defaultValue, value, onValueChange, and variant.

Tabs, TabsList, TabsTrigger, and TabsContent accept standard HTML and Radix UI props. See the interface below for details.

interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
  defaultValue: string
  value?: string
  onValueChange?: (value: string) => void
  variant?: "default" | "underline" | "filled" | "color" | "filter" | "select"
}

interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: "default" | "underline" | "filled" | "color" | "filter" | "select"
}

interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  value: string
  icon?: string | React.ReactNode
  iconPosition?: "left" | "right"
}

interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
  value: string
}