Tabs

A set of layered panels where only the selected one is shown at a time.

A snapshot of your workspace.

Usage

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@appica/ui-react/tabs'

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="activity">Activity</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">A snapshot of your workspace.</TabsContent>
  <TabsContent value="activity">Every change, newest first.</TabsContent>
  <TabsContent value="settings">Workspace name and integrations.</TabsContent>
</Tabs>

Tabs lets a single region host several panels and shows one at a time. Each TabsTrigger is matched to a TabsContent by its value; selecting a trigger reveals its panel and slides the active indicator across the list. Drive it uncontrolled with defaultValue, or controlled with value + onValueChange.

The visual style is set once on the root and flows down through context: variant (pill or line), size (sm/md/lg), and orientation (horizontal or vertical). Override any single part by passing the same prop directly to a TabsList or TabsTrigger.

Reach for Tabs to switch between alternate views of the same area. For navigating between pages or routes, use Navigation or a Breadcrumb instead — tabs are for in-place content, not page navigation.

Examples

Default

The pill variant: a filled track with a sliding white pill behind the active tab. Set the starting tab with defaultValue and pair every TabsTrigger with a TabsContent of the same value.

A snapshot of your workspace — recent files, members, and usage.

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@appica/ui-react/tabs'

export default function TabsDefault() {
  return (
    <Tabs defaultValue="overview" className="w-full max-w-md">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="activity">Activity</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
      <TabsContent value="overview" className="text-foreground-muted text-sm">
        A snapshot of your workspace — recent files, members, and usage.
      </TabsContent>
      <TabsContent value="activity" className="text-foreground-muted text-sm">
        Every change, comment, and deploy across the team, newest first.
      </TabsContent>
      <TabsContent value="settings" className="text-foreground-muted text-sm">
        Manage the workspace name, visibility, and connected integrations.
      </TabsContent>
    </Tabs>
  )
}

Variants

pill rides on a filled track; line drops the track for a minimal underline that slides under the active tab. Pick line for dense layouts or when the tabs sit directly above their content.

import { Tabs, TabsList, TabsTrigger } from '@appica/ui-react/tabs'

export default function TabsVariants() {
  return (
    <div className="flex w-full max-w-md flex-col gap-8">
      <Tabs defaultValue="overview" variant="pill">
        <TabsList>
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="activity">Activity</TabsTrigger>
          <TabsTrigger value="settings">Settings</TabsTrigger>
        </TabsList>
      </Tabs>
      <Tabs defaultValue="overview" variant="line">
        <TabsList>
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="activity">Activity</TabsTrigger>
          <TabsTrigger value="settings">Settings</TabsTrigger>
        </TabsList>
      </Tabs>
    </div>
  )
}

Sizes

Three sizes scale the triggers' padding and text together: sm, md (default), and lg. Set size on the root and it flows to every trigger.

import { Tabs, TabsList, TabsTrigger } from '@appica/ui-react/tabs'

export default function TabsSizes() {
  return (
    <div className="flex flex-col items-center gap-6">
      {(['sm', 'md', 'lg'] as const).map((size) => (
        <Tabs key={size} defaultValue="overview" size={size}>
          <TabsList>
            <TabsTrigger value="overview">Overview</TabsTrigger>
            <TabsTrigger value="activity">Activity</TabsTrigger>
            <TabsTrigger value="settings">Settings</TabsTrigger>
          </TabsList>
        </Tabs>
      ))}
    </div>
  )
}

Vertical

Set orientation="vertical" to stack the triggers in a column beside their panels — handy for settings screens. The arrow keys follow the axis (↑/↓), and the active indicator runs vertically.

Workspace name, URL slug, and default language.

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@appica/ui-react/tabs'

export default function TabsVertical() {
  return (
    <Tabs defaultValue="general" orientation="vertical" className="w-full max-w-md">
      <TabsList>
        <TabsTrigger value="general">General</TabsTrigger>
        <TabsTrigger value="members">Members</TabsTrigger>
        <TabsTrigger value="billing">Billing</TabsTrigger>
      </TabsList>
      <TabsContent value="general" className="text-foreground-muted text-sm">
        Workspace name, URL slug, and default language.
      </TabsContent>
      <TabsContent value="members" className="text-foreground-muted text-sm">
        Invite teammates and manage their roles and permissions.
      </TabsContent>
      <TabsContent value="billing" className="text-foreground-muted text-sm">
        Your current plan, invoices, and payment method.
      </TabsContent>
    </Tabs>
  )
}

With icons & badges

Drop an icon marked data-icon="start" before a trigger's label and it's sized and spaced automatically. The data-icon attribute also tells the trigger to tighten its padding on that side. Triggers accept any children, so a trailing Badge — say a count — sits inline after the label.

A snapshot of your workspace at a glance.

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@appica/ui-react/tabs'
import { Badge } from '@appica/ui-react/badge'
import { LayoutGrid, Activity, Settings } from '@appica/icons-react'

export default function TabsIcons() {
  return (
    <Tabs defaultValue="overview" className="w-full max-w-md">
      <div className="scrollbar-none overflow-x-auto [&::-webkit-scrollbar]:hidden">
        <TabsList>
          <TabsTrigger value="overview">
            <LayoutGrid data-icon="start" />
            Overview
          </TabsTrigger>
          <TabsTrigger value="activity">
            <Activity data-icon="start" />
            Activity
            <Badge variant="outline" size="sm">
              12
            </Badge>
          </TabsTrigger>
          <TabsTrigger value="settings">
            <Settings data-icon="start" />
            Settings
          </TabsTrigger>
        </TabsList>
      </div>
      <TabsContent value="overview" className="text-foreground-muted text-sm">
        A snapshot of your workspace at a glance.
      </TabsContent>
      <TabsContent value="activity" className="text-foreground-muted text-sm">
        Every change across the team, newest first.
      </TabsContent>
      <TabsContent value="settings" className="text-foreground-muted text-sm">
        Workspace name, visibility, and integrations.
      </TabsContent>
    </Tabs>
  )
}

Icon-only

Give each trigger an icon-* size (icon-sm/icon-md/icon-lg) for square, label-less tabs — a compact view switcher, for instance. Pass an aria-label so each tab still has an accessible name.

import { Tabs, TabsList, TabsTrigger } from '@appica/ui-react/tabs'
import { LayoutGrid, List, ChartBar } from '@appica/icons-react'

export default function TabsIconOnly() {
  return (
    <Tabs defaultValue="grid">
      <TabsList>
        <TabsTrigger value="grid" size="icon-md" aria-label="Grid view">
          <LayoutGrid />
        </TabsTrigger>
        <TabsTrigger value="list" size="icon-md" aria-label="List view">
          <List />
        </TabsTrigger>
        <TabsTrigger value="chart" size="icon-md" aria-label="Chart view">
          <ChartBar />
        </TabsTrigger>
      </TabsList>
    </Tabs>
  )
}

Controlled

Hold the active tab in state with value + onValueChange to drive it from elsewhere — here Back/Next buttons step through a wizard while the tabs reflect the current step.

Step 1 — choose a username and password.

'use client'

import * as React from 'react'
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@appica/ui-react/tabs'
import { Button } from '@appica/ui-react/button'

const STEPS = ['account', 'profile', 'review'] as const
type Step = (typeof STEPS)[number]

export default function TabsControlled() {
  const [step, setStep] = React.useState<Step>('account')
  const index = STEPS.indexOf(step)
  const goTo = (target: number) => setStep(STEPS[Math.min(Math.max(target, 0), STEPS.length - 1)]!)

  return (
    <div className="flex w-full max-w-sm flex-col gap-5">
      <Tabs value={step} onValueChange={(value) => setStep(value as Step)}>
        <TabsList>
          <TabsTrigger value="account">Account</TabsTrigger>
          <TabsTrigger value="profile">Profile</TabsTrigger>
          <TabsTrigger value="review">Review</TabsTrigger>
        </TabsList>
        <TabsContent value="account" className="text-foreground-muted text-sm">
          Step 1 — choose a username and password.
        </TabsContent>
        <TabsContent value="profile" className="text-foreground-muted text-sm">
          Step 2 — tell us a little about yourself.
        </TabsContent>
        <TabsContent value="review" className="text-foreground-muted text-sm">
          Step 3 — review everything and submit.
        </TabsContent>
      </Tabs>

      <div className="flex gap-2">
        <Button variant="outline" size="sm" disabled={index === 0} onClick={() => goTo(index - 1)}>
          Back
        </Button>
        <Button size="sm" disabled={index === STEPS.length - 1} onClick={() => goTo(index + 1)}>
          Next
        </Button>
      </div>
    </div>
  )
}

Disabled

Add disabled to a TabsTrigger to make it non-interactive; arrow-key navigation skips over it.

The billing tab is disabled until you upgrade to a paid plan.

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@appica/ui-react/tabs'

export default function TabsDisabled() {
  return (
    <Tabs defaultValue="overview" className="w-full max-w-md">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="activity">Activity</TabsTrigger>
        <TabsTrigger value="billing" disabled>
          Billing
        </TabsTrigger>
      </TabsList>
      <TabsContent value="overview" className="text-foreground-muted text-sm">
        The billing tab is disabled until you upgrade to a paid plan.
      </TabsContent>
      <TabsContent value="activity" className="text-foreground-muted text-sm">
        Every change across the team, newest first.
      </TabsContent>
    </Tabs>
  )
}

RTL

Every Appica UI component supports right-to-left layouts out of the box. Set the dir attribute on a container (commonly your <html> element) so CSS logical properties resolve correctly, and wrap your tree in DirectionProvider so direction-aware behavior — roving focus, indicator placement, and the like — follows the same direction.

import { DirectionProvider } from '@appica/ui-react/providers/direction-provider'

export default function RootLayout({ children }) {
  return (
    <html lang="ar" dir="rtl">
      <body>
        <DirectionProvider dir="rtl">{children}</DirectionProvider>
      </body>
    </html>
  )
}

The tabs flow from the right, the active indicator slides along the resolved direction, and ←/→ arrow keys swap roles. For setup details and caveats, see the RTL guide.

لمحة سريعة عن مساحة العمل الخاصة بك.

API reference

Tabs wraps Base UI's Tabs. The root provides the variant/size/orientation context; each part forwards ref and its remaining native attributes to the underlying element.

Tabs

The root. Owns the selected value and renders a <div>.

Prop	Type	Default	Description
`defaultValue`	`string \| number \| null`	—	The initially selected tab's `value`, for uncontrolled use.
`value`	`string \| number \| null`	—	The selected tab's `value`, for controlled use. Pair with `onValueChange`.
`onValueChange`	`(value, eventDetails) => void`	—	Called when the selected tab changes.
`variant`	`'pill' \| 'line'`	`'pill'`	Visual style, shared with the list and triggers via context.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Trigger sizing, shared via context.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout axis and the direction arrow keys move focus. Exposed as `data-orientation`.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Replace the rendered element, or compose it with another component.
`className`	`string \| ((state) => string)`	—	Extra classes, merged via `tailwind-merge`. May be a function of state.

TabsList

The row (or column) of triggers, with the sliding active indicator built in. Renders a <div role="tablist">.

Prop	Type	Default	Description
`variant`	`'pill' \| 'line'`	context	Override the root's variant for this list.
`size`	`'sm' \| 'md' \| 'lg'`	context	Override the root's size for this list.
`activateOnFocus`	`boolean`	`false`	Activate a tab as soon as it's focused with the arrow keys, not only on click/Enter.
`loopFocus`	`boolean`	`true`	Whether arrow-key focus wraps from the last trigger to the first and back.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Replace the rendered element, or compose it with another component.
`className`	`string \| ((state) => string)`	—	Extra classes, merged via `tailwind-merge`.

TabsTrigger

One tab button. Renders a <button role="tab">.

Prop	Type	Default	Description
`value`	`string \| number`	—	Required. Identifies the tab and matches it to a `TabsContent`.
`variant`	`'pill' \| 'line'`	context	Override the variant for this trigger.
`size`	`'sm' \| 'md' \| 'lg' \| 'icon-sm' \| 'icon-md' \| 'icon-lg'`	context	Override the size; `icon-*` makes a square, label-less trigger.
`disabled`	`boolean`	`false`	Make the tab non-interactive and skip it during arrow navigation.
`nativeButton`	`boolean`	`true`	Whether the element passed to `render` is a native `<button>`.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Replace the rendered element, or compose it with another component.
`className`	`string \| ((state) => string)`	—	Extra classes, merged via `tailwind-merge`.

TabsContent

The panel revealed by its matching trigger. Renders a <div role="tabpanel">.

Prop	Type	Default	Description
`value`	`string \| number`	—	Required. Matches the trigger of the same `value`.
`keepMounted`	`boolean`	`false`	Keep inactive panels mounted (hidden) instead of unmounting them.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Replace the rendered element, or compose it with another component.
`className`	`string \| ((state) => string)`	—	Extra classes, merged via `tailwind-merge`.

Accessibility

The parts map to the WAI-ARIA tabs pattern: TabsList is a role="tablist", each TabsTrigger a role="tab", and each TabsContent a role="tabpanel" wired together with aria-controls/aria-labelledby.
The list is a single tab stop: Tab moves focus into the active trigger, and the arrow keys move focus between triggers — ←/→ when horizontal, ↑/↓ when vertical — wrapping unless loopFocus is false.
By default a tab activates on Enter/Space; set activateOnFocus to switch panels as focus moves instead.
disabled triggers are removed from the tab order and skipped by arrow navigation.
An icon-only TabsTrigger has no visible text, so give it an aria-label.
The indicator and panel transitions honour prefers-reduced-motion.

Actions & Inputs

Data Display

Decoration & Effects

Layout

Menus

Navigation

Overlays

Status & Feedback

Tabs

Usage

Examples

Default

Variants

Sizes

Vertical

With icons & badges

Icon-only

Controlled

Disabled

RTL

API reference

Tabs

TabsList

TabsTrigger

TabsContent

Accessibility