Tabs — Design System

Examples

Peer views

A visible tab list keeps the current subject in place while switching panels.

24 teammates are active across 6 projects.

Tabs preview with overview and activity panels

"use client";

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

export function Example() {
  return (
    <Tabs defaultValue="overview">
      <TabsList aria-label="Project sections">
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="activity">Activity</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">A short project summary.</TabsContent>
      <TabsContent value="activity">Recent changes and events.</TabsContent>
    </Tabs>
  );
}

Controlled active tab

The feature can coordinate the selected tab with surrounding state.

Summary panel.

Current tab: overview

Controlled Tabs with current value

"use client";

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

export function Example() {
  return (
    <Tabs defaultValue="overview">
      <TabsList aria-label="Project sections">
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="activity">Activity</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">A short project summary.</TabsContent>
      <TabsContent value="activity">Recent changes and events.</TabsContent>
    </Tabs>
  );
}

Disabled tab

A tab can remain visible while unavailable in the current context.

Only the available view can be selected.

Tabs with a disabled trigger

"use client";

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

export function Example() {
  return (
    <Tabs defaultValue="overview">
      <TabsList aria-label="Project sections">
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="activity">Activity</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">A short project summary.</TabsContent>
      <TabsContent value="activity">Recent changes and events.</TabsContent>
    </Tabs>
  );
}

Labels with icons

Decorative icons reinforce short labels without replacing them.

Icon plus label keeps the view identifiable.

Tabs with decorative icons

"use client";

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

export function Example() {
  return (
    <Tabs defaultValue="overview">
      <TabsList aria-label="Project sections">
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="activity">Activity</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">A short project summary.</TabsContent>
      <TabsContent value="activity">Recent changes and events.</TabsContent>
    </Tabs>
  );
}

Long panel content

Panel content wraps and scrolls with the surrounding page instead of clipping.

A long panel keeps its reading order and uses the page scroll region.

Tabs with long panel content

"use client";

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

export function Example() {
  return (
    <Tabs defaultValue="overview">
      <TabsList aria-label="Project sections">
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="activity">Activity</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">A short project summary.</TabsContent>
      <TabsContent value="activity">Recent changes and events.</TabsContent>
    </Tabs>
  );
}

When to use

Use Tabs for peer views of the same subject where people may move between sections without losing context. Use navigation links for different resources and an accordion when several sections should be open in a single flow.

Usage

"use client";

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

export function Example() {
  return (
    <Tabs defaultValue="overview">
      <TabsList aria-label="Project sections">
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="activity">Activity</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">A short project summary.</TabsContent>
      <TabsContent value="activity">Recent changes and events.</TabsContent>
    </Tabs>
  );
}

Use a stable value for each tab and panel. The root can be uncontrolled with defaultValue or controlled with value and onValueChange.

Admin example

This data-only admin surface composes Tabs, Card, Badge, Input, Tooltip, IconButton, and Button without adding a backend or hiding actions behind hover.

Active projects

Events this week

4,280

Pending invites

A small administration screen using the Phase 4 component set.

API

Component API
Prop	Type	Default	Description	Constraints
`defaultValue / value`	`TabsTab.Value`	`first enabled tab`	Uncontrolled or controlled active tab.	Do not switch control models after mount.
`onValueChange`	`(value, eventDetails) => void`	`—`	Called when a tab changes by pointer or keyboard.	Use it to coordinate surrounding state, not to duplicate active state.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Tab list direction and arrow-key axis.	Match the visual layout and label the list.
`TabsList`	`List props`	`—`	Groups tab triggers and manages roving focus.	Provide an accessible label when the purpose is not visible.
`TabsTrigger / TabsContent`	`Tab and panel props`	`—`	Pairs a value with its panel.	Use matching values and keep panel content meaningful.

Tokens

Component tokens
Token	Role	Effective value	Usage
`--size-control-sm`	Tab density	`1.75rem`	Keeps the tab list compact while preserving focus visibility.
`--color-bg-surface / --color-bg-subtle`	Active state	`semantic surfaces`	Active tabs separate from the list without relying on color alone.
`--focus-ring-*`	Keyboard focus	`shared focus`	Roving tab focus remains visible.

Accessibility

Use Arrow Left/Right (or Up/Down for vertical tabs) to move between tabs and Enter/Space when activation on focus is disabled.
Ensure the active tab and its panel are linked by the primitive; do not render a panel with a mismatched value.
Keep tab labels concise and do not use tabs for a single action or unrelated navigation.

Do and don’t

Use tabs for genuinely peer views and keep the current subject in place.

Don’t

Use a tab strip as a wizard, hide required content only on hover, or create a tab for one item.

Card provides the surface for a tab panel.
DropdownMenu is better for a compact action/choice list.
Accessibility documents keyboard and focus review.