Tabs

Tabs organize content into mutually exclusive panels. Used for settings pages, detail views, and complex workflows.

Usage

import { Tabs } from '@gtcx/ui';
 
<Tabs defaultValue="general">
  <Tabs.List>
    <Tabs.Trigger value="general">General</Tabs.Trigger>
    <Tabs.Trigger value="security">Security</Tabs.Trigger>
    <Tabs.Trigger value="billing">Billing</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="general">
    <p>General settings content</p>
  </Tabs.Content>
  <Tabs.Content value="security">
    <p>Security settings content</p>
  </Tabs.Content>
  <Tabs.Content value="billing">
    <p>Billing settings content</p>
  </Tabs.Content>
</Tabs>

Pill Variant

<Tabs defaultValue="all" variant="pill">
  <Tabs.List>
    <Tabs.Trigger value="all">All</Tabs.Trigger>
    <Tabs.Trigger value="active">Active</Tabs.Trigger>
    <Tabs.Trigger value="archived">Archived</Tabs.Trigger>
  </Tabs.List>
</Tabs>

In Layout

The content-sidebar layout variant uses tabs as the primary navigation below the header. See Content Sidebar.

Guidelines

Use tabs for content that doesn't need to be viewed simultaneously
Limit to 2-7 tabs per group
Use clear, concise labels (1-2 words)
Consider the pill variant for filter-style tab groups

Breadcrumbs Pagination