Tabs

Tabs organize related content into separate panels, allowing users to switch between views without leaving the page.

Interactive preview

Click tabs to switch between panels.

Account settings

Manage your account details, profile picture, and display name.

Active tab: account

Components

PropTypeDefaultDescription
Tabs——Root container. Requires defaultValue.
defaultValuestring—Initially active tab (uncontrolled).
valuestring—Active tab (controlled).
onValueChange(value: string) => void—Called when active tab changes.
TabsList——Container for tab triggers.
TabsTrigger——Clickable tab button. Requires value prop.
TabsContent——Panel shown when matching tab is active. Requires value prop.

Installation

Install packages
pnpm add @akanaka-design/components @akanaka-design/tokens
Styles (app root)
import "@akanaka-design/tokens/css";
import "@akanaka-design/components/styles.css";

Usage

Basic usage
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@akanaka-design/components";

export function Example() {
  return (
    <Tabs defaultValue="overview">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="analytics">Analytics</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">
        <p>Overview content goes here.</p>
      </TabsContent>
      <TabsContent value="analytics">
        <p>Analytics content goes here.</p>
      </TabsContent>
      <TabsContent value="settings">
        <p>Settings content goes here.</p>
      </TabsContent>
    </Tabs>
  );
}

Controlled

Manage the active tab externally:

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

<Tabs value={activeTab} onValueChange={setActiveTab} 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>

<p>Active: {activeTab}</p>

With icons

Add icons alongside tab labels:

With icons
<Tabs defaultValue="profile">
  <TabsList>
    <TabsTrigger value="profile" className="flex items-center gap-2">
      <UserIcon className="w-4 h-4" />
      Profile
    </TabsTrigger>
    <TabsTrigger value="notifications" className="flex items-center gap-2">
      <BellIcon className="w-4 h-4" />
      Notifications
    </TabsTrigger>
  </TabsList>
  <TabsContent value="profile">Profile settings</TabsContent>
  <TabsContent value="notifications">Notification preferences</TabsContent>
</Tabs>

Guidelines

When to use

  • Related content that can be grouped logically
  • Settings or preferences with distinct categories
  • Dashboards with multiple views of the same data

When not to use

  • Sequential steps — use a stepper or wizard
  • Navigation between pages — use links or a navbar
  • Unrelated content — use separate pages or sections

Content

  • Use short, descriptive tab labels (1–2 words)
  • Keep the number of tabs manageable (2–5)
  • Order tabs by importance or frequency of use
  • Consider using icons to reinforce meaning