Tabs

A set of layered panels where only one panel is displayed at a time, triggered by corresponding tab buttons.

Examples

Primary

Manage your account settings and preferences.

Secondary

Showing all items.

Rounded

Showing all items.

Rounded (animated)

Showing all items.

Sizes

Sizes (secondary)

Sizes (rounded)

Secondary (animated)

Showing all items.

Animated indicator

Dashboard overview with key metrics.

Disabled

This tab is active.

Vertical

General

Manage your name, email, and language preferences for the workspace.

Controlled

Content for the first tab.

Overview

Tabs organize content into switchable panels. Three visual variants, three sizes, optional animated indicator, vertical orientation, controlled or uncontrolled state. Built on Base UI Tabs.

tsx

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@rogo-technologies/ui/tabs";

<Tabs defaultValue="account">
  <TabsList variant="primary">
    <TabsTrigger variant="primary" value="account">
      Account
    </TabsTrigger>
    <TabsTrigger variant="primary" value="security">
      Security
    </TabsTrigger>
  </TabsList>
  <TabsContent value="account">Account settings here.</TabsContent>
  <TabsContent value="security">Security settings here.</TabsContent>
</Tabs>;

Usage

Primary

Underline-style tab bar with a bottom border. Active tabs get the brand color border.

tsx

<Tabs defaultValue="account">
  <TabsList variant="primary">
    <TabsTrigger variant="primary" value="account">
      Account
    </TabsTrigger>
    <TabsTrigger variant="primary" value="security">
      Security
    </TabsTrigger>
  </TabsList>
  <TabsContent value="account">…</TabsContent>
</Tabs>

Secondary

Pill-style tabs inside a rounded container. Active tabs get a raised background.

tsx

<TabsList variant="secondary">
  <TabsTrigger variant="secondary" value="all">
    All
  </TabsTrigger>
  <TabsTrigger variant="secondary" value="active">
    Active
  </TabsTrigger>
</TabsList>

Rounded

Like secondary, but each tab is its own fully-rounded pill instead of sitting in a shared track. Inactive tabs carry the grey fill; the active tab goes white and raised. Good for compact, free-standing toggles in toolbars and headers.

tsx

<TabsList variant="rounded">
  <TabsTrigger variant="rounded" value="all">
    All
  </TabsTrigger>
  <TabsTrigger variant="rounded" value="active">
    Active
  </TabsTrigger>
</TabsList>

Sizes

Three sizes are available: sm, md (default), and lg. Set the same size on TabsList and every TabsTrigger so they stay in sync — md matches the original tab styling. Works with all three variants and the animated indicator.

tsx

<TabsList variant="primary" size="sm">
  <TabsTrigger variant="primary" size="sm" value="account">
    Account
  </TabsTrigger>
  <TabsTrigger variant="primary" size="sm" value="security">
    Security
  </TabsTrigger>
</TabsList>

Animated indicator

Pass the same activeLayoutId string to each trigger to get a smooth indicator that slides between tabs via framer-motion layoutId. Works for all three variants — primary slides the underline, secondary and rounded slide the raised pill background.

tsx

<TabsTrigger variant="primary" value="overview" activeLayoutId="settings-tabs">
  Overview
</TabsTrigger>
<TabsTrigger variant="primary" value="analytics" activeLayoutId="settings-tabs">
  Analytics
</TabsTrigger>

Disabled

tsx

<TabsTrigger variant="primary" value="archive" disabled>
  Archive
</TabsTrigger>

Vertical

For settings sidebars and navigation panels. Use orientation="vertical", lay out the root as a flex row, and override the TabsList / TabsTrigger classes to move the active border from bottom to right.

tsx

<Tabs defaultValue="general" orientation="vertical" className="flex gap-6">
  <TabsList
    variant="primary"
    className="flex-col border-b-0 border-r border-primary h-auto w-40 shrink-0 gap-0"
  >
    <TabsTrigger
      variant="primary"
      value="general"
      className="w-full justify-start border-b-0 border-r-2 px-3 py-1.5"
    >
      General
    </TabsTrigger>
  </TabsList>
  <div className="flex-1">
    <TabsContent value="general" className="mt-0">
      …
    </TabsContent>
  </div>
</Tabs>

Controlled

tsx

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

<Tabs value={activeTab} onValueChange={setActiveTab}>
  <TabsList variant="primary">
    <TabsTrigger variant="primary" value="tab1">
      First
    </TabsTrigger>
    <TabsTrigger variant="primary" value="tab2">
      Second
    </TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">…</TabsContent>
  <TabsContent value="tab2">…</TabsContent>
</Tabs>;

API

Tabs

Prop	Type	Default	Description
`value`	`string`	—	Controlled active tab value.
`defaultValue`	`string`	—	Uncontrolled initial active tab.
`onValueChange`	`(value: string) => void`	—	Callback when the active tab changes.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout direction.
`className`	`string`	—	Additional CSS classes.

TabsList

Prop	Type	Default	Description
`variant`	`"primary" \| "secondary" \| "rounded"`	`"primary"`	Visual style variant.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Tab sizing scale.
`className`	`string`	—	Additional CSS classes.

TabsTrigger

Prop	Type	Default	Description
`value`	`string`	—	Unique tab identifier (required).
`variant`	`"primary" \| "secondary" \| "rounded"`	`"primary"`	Visual style variant.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Tab sizing scale. Match the `TabsList` size.
`activeLayoutId`	`string`	—	Renders an animated indicator via framer-motion `layoutId`. Works on all variants.
`disabled`	`boolean`	`false`	Disables the tab.
`className`	`string`	—	Additional CSS classes.

TabsContent

Prop	Type	Default	Description
`value`	`string`	—	Value matching a TabsTrigger (required).
`keepMounted`	`boolean`	`false`	Keep DOM element when panel is hidden.
`className`	`string`	—	Additional CSS classes.

Guidelines

Do

Match variant and size on TabsList and TabsTrigger for consistent styling
Use activeLayoutId with the same string on all triggers when you want a sliding indicator
Use orientation="vertical" for settings sidebars and navigation panels
Keep tab labels short — one or two words

Don't

Don't nest tabs inside tabs — it creates confusing navigation
Don't use tabs for sequential steps — use a stepper or wizard instead
Don't use more than 5–6 tabs — group or collapse content if needed
Don't mix variants within the same tab group

PreviousSwitch

NextTextarea