Tabs

A set of layered sections of content, known as tab panels, that are displayed one at a time. For links that switch between router-rendered pages, use TabsNav instead.

Code

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@falcon/ui-kit";

export function Example() {
  return (
    <Tabs defaultValue="overview" className="tw:w-full tw:max-w-[400px]">
      <TabsList className="tw:max-w-full tw:overflow-x-auto">
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="orders">Orders</TabsTrigger>
        <TabsTrigger value="inventory">Inventory</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">
        <Card>
          <CardHeader>
            <CardTitle>Overview</CardTitle>
            <CardDescription>
              View key sales metrics and recent account activity. Track progress
              across all active customer accounts.
            </CardDescription>
          </CardHeader>
          <CardContent className="tw:text-sm tw:text-muted-foreground">
            You have 12 active accounts and 3 orders awaiting review.
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="orders">
        <Card>
          <CardHeader>
            <CardTitle>Orders</CardTitle>
            <CardDescription>
              Track open orders and fulfillment activity. Monitor upcoming
              deliveries and items requiring attention.
            </CardDescription>
          </CardHeader>
          <CardContent className="tw:text-sm tw:text-muted-foreground">
            Order volume is up 25% compared to last month.
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="inventory">
        <Card>
          <CardHeader>
            <CardTitle>Inventory</CardTitle>
            <CardDescription>
              Review product availability and replenishment needs. Export
              inventory data for further analysis.
            </CardDescription>
          </CardHeader>
          <CardContent className="tw:text-sm tw:text-muted-foreground">
            You have 5 products below their reorder points.
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="settings">
        <Card>
          <CardHeader>
            <CardTitle>Settings</CardTitle>
            <CardDescription>
              Manage account preferences and options. Customize notifications
              and order workflows to fit your needs.
            </CardDescription>
          </CardHeader>
          <CardContent className="tw:text-sm tw:text-muted-foreground">
            Configure notifications, approvals, and delivery preferences.
          </CardContent>
        </Card>
      </TabsContent>
    </Tabs>
  );
}

Composition

Use the following composition to build Tabs:

Tabs
├── TabsList
│   ├── TabsTrigger
│   └── TabsTrigger
├── TabsContent
└── TabsContent

Line

Use the variant="line" prop on TabsList for a line style.

Code

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@falcon/ui-kit";

export function Example() {
  return (
    <Tabs defaultValue="overview">
      <TabsList variant="line">
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="orders">Orders</TabsTrigger>
        <TabsTrigger value="reports">Reports</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">
        Review current account activity.
      </TabsContent>
      <TabsContent value="orders">Track open customer orders.</TabsContent>
      <TabsContent value="reports">
        View sales and inventory reports.
      </TabsContent>
    </Tabs>
  );
}

Vertical

Use orientation="vertical" for vertical tabs.

Code

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@falcon/ui-kit";

export function Example() {
  return (
    <Tabs defaultValue="account" orientation="vertical">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="orders">Orders</TabsTrigger>
        <TabsTrigger value="notifications">Notifications</TabsTrigger>
      </TabsList>
      <TabsContent value="account">Manage account details.</TabsContent>
      <TabsContent value="orders">Review order preferences.</TabsContent>
      <TabsContent value="notifications">
        Choose notification rules.
      </TabsContent>
    </Tabs>
  );
}

Disabled

Code

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@falcon/ui-kit";

export function Example() {
  return (
    <Tabs defaultValue="home">
      <TabsList>
        <TabsTrigger value="home">Home</TabsTrigger>
        <TabsTrigger value="settings" disabled>
          Disabled
        </TabsTrigger>
      </TabsList>
      <TabsContent value="home">Review current account activity.</TabsContent>
      <TabsContent value="settings">Manage account settings.</TabsContent>
    </Tabs>
  );
}

Icons

Code

import {
  AppWindowIcon,
  CodeIcon,
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@falcon/ui-kit";

export function Example() {
  return (
    <Tabs defaultValue="preview">
      <TabsList>
        <TabsTrigger value="preview">
          <AppWindowIcon />
          Preview
        </TabsTrigger>
        <TabsTrigger value="code">
          <CodeIcon />
          Details
        </TabsTrigger>
      </TabsList>
      <TabsContent value="preview">Preview the customer account.</TabsContent>
      <TabsContent value="code">Review the account details.</TabsContent>
    </Tabs>
  );
}

API

Tabs

Groups related tab triggers and panels. Renders a <div> element. Each TabsTrigger value must match a TabsContent value.

Props

className

className?: string

CSS class applied to the element.

defaultValue

defaultValue?: any

The default active tab value. Use value for controlled state. Defaults to 0; pass null to start with no active tab.

onValueChange

onValueChange?: ((value: TabsPrimitive.Tab.Value, eventDetails: TabsPrimitive.Root.ChangeEventDetails) => void)

Callback called when the active tab value changes.

orientation

orientation?: Orientation = "horizontal"

The layout direction of the tabs. Defaults to "horizontal".

render

render?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, TabsRootState>

Replaces the root element or composes it with another component.

style

style?: React.CSSProperties | ((state: TabsRootState) => React.CSSProperties | undefined)

Style applied to the element, or a function based on its state.

value

value?: any

The active tab value in controlled state. Use defaultValue for uncontrolled state; pass null for no active tab.

TabsContent

Displays the panel for its active TabsTrigger. Renders a <div> element.

Props

className

className?: string

CSS class applied to the element.

keepMounted

keepMounted?: boolean

Whether to keep the panel in the DOM while it is hidden. Defaults to false.

render

render?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, TabsPanelState>

Replaces the panel element or composes it with another component.

style

style?: React.CSSProperties | ((state: TabsPanelState) => React.CSSProperties | undefined)

Style applied to the element, or a function based on its state.

value

value: any

The value that identifies the corresponding TabsTrigger.

TabsList

Groups the tab triggers. Renders a <div> element.

Props

activateOnFocus

activateOnFocus?: boolean

Whether focusing a tab with an arrow key also activates it. Defaults to false.

className

className?: string

CSS class applied to the element.

loopFocus

loopFocus?: boolean

Whether arrow-key focus loops from the last tab to the first. Defaults to true.

render

render?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, TabsListState>

Replaces the list element or composes it with another component.

style

style?: React.CSSProperties | ((state: TabsListState) => React.CSSProperties | undefined)

Style applied to the element, or a function based on its state.

variant

variant?: "line" | "default" | null = "default"

Changes only appearance, not behavior. Defaults to "default".

TabsTrigger

Activates its corresponding TabsContent panel. Renders a <button> element.

Props

className

className?: string

CSS class applied to the element.

disabled

disabled?: boolean

Whether the tab ignores user interaction.

nativeButton

nativeButton?: boolean

Whether the element supplied to render is a native <button>. Defaults to true; set to false when rendering another element.

render

render?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, TabsTabState>

Replaces the tab element or composes it with another component.

style

style?: React.CSSProperties | ((state: TabsTabState) => React.CSSProperties | undefined)

Style applied to the element, or a function based on its state.

value

value: any

The value that identifies the corresponding TabsContent panel.