Tabs

Organizes content into multiple panels, allowing users to switch between views.

Import

tsx

import { Tabs, TabsList, TabTrigger, TabContent } from '@tac-ui/web';

Playground

Interactively configure the Tabs props below.

Account settings content.

Variant

tsx

<Tabs defaultValue="tab1" variant="underline">
  <TabsList>
    <TabTrigger value="tab1">Account</TabTrigger>
    <TabTrigger value="tab2">Password</TabTrigger>
    <TabTrigger value="tab3">Settings</TabTrigger>
  </TabsList>
  <TabContent value="tab1">Account settings content.</TabContent>
  <TabContent value="tab2">Password settings content.</TabContent>
  <TabContent value="tab3">General settings content.</TabContent>
</Tabs>

Underline

The default underline variant renders tabs with a bottom border and an animated indicator that slides between active tabs. Use this for content-heavy pages where tabs span the full width.

Account settings content.

tsx

<Tabs defaultValue="tab1" variant="underline">
  <TabsList>
    <TabTrigger value="tab1">Account</TabTrigger>
    <TabTrigger value="tab2">Password</TabTrigger>
    <TabTrigger value="tab3">Settings</TabTrigger>
  </TabsList>
  <TabContent value="tab1">Account settings content.</TabContent>
  <TabContent value="tab2">Password settings content.</TabContent>
  <TabContent value="tab3">General settings content.</TabContent>
</Tabs>

Pill

The pill variant wraps the tab list in a secondary-colored container and uses a filled pill indicator. Use this for compact, inline tab groups.

Account settings content.

tsx

<Tabs defaultValue="tab1" variant="pill">
  <TabsList>
    <TabTrigger value="tab1">Account</TabTrigger>
    <TabTrigger value="tab2">Password</TabTrigger>
    <TabTrigger value="tab3">Settings</TabTrigger>
  </TabsList>
  <TabContent value="tab1">Account settings content.</TabContent>
  <TabContent value="tab2">Password settings content.</TabContent>
  <TabContent value="tab3">General settings content.</TabContent>
</Tabs>

Outline

The outline variant renders the tab list as a bordered control group. The active tab is highlighted with a filled background and uses an animated color transition via Framer Motion layout.

Account settings content.

tsx

<Tabs defaultValue="tab1" variant="outline">
  <TabsList>
    <TabTrigger value="tab1">Account</TabTrigger>
    <TabTrigger value="tab2">Password</TabTrigger>
    <TabTrigger value="tab3">Settings</TabTrigger>
  </TabsList>
  <TabContent value="tab1">Account settings content.</TabContent>
  <TabContent value="tab2">Password settings content.</TabContent>
  <TabContent value="tab3">General settings content.</TabContent>
</Tabs>

Icon

The icon variant renders icon-only tabs by default, expanding the active tab to reveal its label with a spring animation. Pass an icon node via the icon prop on each TabTrigger.

Account settings content.

tsx

<Tabs defaultValue="tab1" variant="icon">
  <TabsList>
    <TabTrigger value="tab1" icon={<User />}>Account</TabTrigger>
    <TabTrigger value="tab2" icon={<Settings />}>Settings</TabTrigger>
    <TabTrigger value="tab3" icon={<Bell />}>Notifications</TabTrigger>
  </TabsList>
  <TabContent value="tab1">Account settings content.</TabContent>
  <TabContent value="tab2">General settings content.</TabContent>
  <TabContent value="tab3">Notification preferences content.</TabContent>
</Tabs>

API Reference

Tabs props:

Prop	Type	Default	Description
variant	"underline" \| "pill" \| "outline" \| "icon"	"underline"	Visual style variant of the tab list.
defaultValue	string	-	The tab value open by default in uncontrolled mode.
value	string	-	The controlled active tab value.
onValueChange	(value: string) => void	-	Called when the active tab changes. Use with value for controlled mode.
className	string	-	Additional CSS class names.
children	React.ReactNode	-	Compose with TabsList, TabTrigger, and TabContent.

TabTrigger props:

Prop	Type	Default	Description
value	string	-	The value this trigger activates; must match a TabContent value.
icon	React.ReactNode	-	Icon element to display (used with icon variant; shown collapsed on inactive tabs).
children	React.ReactNode	-	Tab label text.

TabContent props:

Prop	Type	Default	Description
value	string	-	The value that activates this content panel; must match a TabTrigger value.
children	React.ReactNode	-	Content rendered when this tab is active.
className	string	-	Additional CSS class names.