Tabs

Sections of content shown one at a time.

Website redesign is 64% complete with 10 tasks remaining.

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

export default function TabsDefault() {
  return (
    <Tabs defaultValue="overview" className="w-full max-w-lg">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="tasks">Tasks</TabsTrigger>
        <TabsTrigger value="files">Files</TabsTrigger>
        <TabsTrigger value="archive" disabled>
          Archive
        </TabsTrigger>
      </TabsList>
      <TabsContent
        value="overview"
        className="border-[0.5px] border-border-muted p-4 text-muted-foreground"
      >
        Website redesign is 64% complete with 10 tasks remaining.
      </TabsContent>
      <TabsContent
        value="tasks"
        className="border-[0.5px] border-border-muted p-4 text-muted-foreground"
      >
        28 tasks, 4 assigned to you.
      </TabsContent>
      <TabsContent
        value="files"
        className="border-[0.5px] border-border-muted p-4 text-muted-foreground"
      >
        12 files, last uploaded 2 hours ago.
      </TabsContent>
    </Tabs>
  );
}

Installation

Add the registryOnce per project
pnpm dlx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
Add tabs
pnpm dlx shadcn@latest add @jarvis/tabs

Usage

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

export function ProjectTabs() {
  return (
    <Tabs defaultValue="overview">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="tasks">Tasks</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">A summary of the project.</TabsContent>
      <TabsContent value="tasks">Everything left to do.</TabsContent>
    </Tabs>
  );
}

Each TabsTrigger shows the TabsContent with the same value. Set defaultValue on Tabs, or control it with value and onValueChange.

Composition

Tabs
- TabsList
  - TabsTrigger
- TabsContent

Examples

Line

variant="line" underlines the active tab, for a page's main sections. When the tabs don't fit, the row scrolls and fades at its edges.

Sam Rivera moved “Update pricing page” to In progress.

import { ActivityIcon, RocketIcon, SettingsIcon, UsersIcon } from "lucide-react";

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

export default function TabsLine() {
  return (
    <Tabs defaultValue="activity" className="w-full">
      <TabsList variant="line">
        <TabsTrigger value="activity">
          <ActivityIcon />
          Activity
        </TabsTrigger>
        <TabsTrigger value="deployments">
          <RocketIcon />
          Deployments
        </TabsTrigger>
        <TabsTrigger value="members">
          <UsersIcon />
          Members
          <Badge variant="muted">12</Badge>
        </TabsTrigger>
        <TabsTrigger value="settings">
          <SettingsIcon />
          Settings
        </TabsTrigger>
      </TabsList>
      <TabsContent
        value="activity"
        className="mt-2 border-[0.5px] border-border-muted p-4 text-muted-foreground"
      >
        Sam Rivera moved “Update pricing page” to In progress.
      </TabsContent>
      <TabsContent
        value="deployments"
        className="mt-2 border-[0.5px] border-border-muted p-4 text-muted-foreground"
      >
        The latest deployment finished 3 minutes ago.
      </TabsContent>
      <TabsContent
        value="members"
        className="mt-2 border-[0.5px] border-border-muted p-4 text-muted-foreground"
      >
        12 people have access to this project.
      </TabsContent>
      <TabsContent
        value="settings"
        className="mt-2 border-[0.5px] border-border-muted p-4 text-muted-foreground"
      >
        Rename the project, change its visibility or archive it.
      </TabsContent>
    </Tabs>
  );
}

Vertical

orientation="vertical" stacks the tabs beside their content.

Name, URL and default language.

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

export default function TabsVertical() {
  return (
    <Tabs defaultValue="general" orientation="vertical" className="w-full max-w-lg">
      <TabsList className="w-32">
        <TabsTrigger value="general">General</TabsTrigger>
        <TabsTrigger value="members">Members</TabsTrigger>
        <TabsTrigger value="billing">Billing</TabsTrigger>
        <TabsTrigger value="security">Security</TabsTrigger>
      </TabsList>
      <TabsContent
        value="general"
        className="border-[0.5px] border-border-muted p-4 text-muted-foreground"
      >
        Name, URL and default language.
      </TabsContent>
      <TabsContent
        value="members"
        className="border-[0.5px] border-border-muted p-4 text-muted-foreground"
      >
        Invite people and manage roles.
      </TabsContent>
      <TabsContent
        value="billing"
        className="border-[0.5px] border-border-muted p-4 text-muted-foreground"
      >
        Plan, invoices and billing address.
      </TabsContent>
      <TabsContent
        value="security"
        className="border-[0.5px] border-border-muted p-4 text-muted-foreground"
      >
        Two-step verification and active sessions.
      </TabsContent>
    </Tabs>
  );
}

Props

Part	Extends
Tabs	Base UI's Tabs.Root
TabsList	Base UI's Tabs.List
TabsTrigger	Base UI's Tabs.Tab
TabsContent	Base UI's Tabs.Panel

The tables leave out className, style and render. Parts built on Base UI take them as its styling and composition guides describe.

Tabs

Prop	Type	Default
`value` The value of the currently active `Tab`. Use when the component is controlled. When the value is `null`, no Tab will be active.	`any`	—
`defaultValue` The default value. Use when the component is not controlled. When the value is `null`, no Tab will be active.	`any`	`0`
`orientation` The component orientation (layout flow direction).	`"horizontal" \| "vertical"`	`"horizontal"`
`onValueChange` Callback invoked when new value is being set. The event `reason` is `'none'` for user-initiated changes, such as a click or keyboard navigation; `'initial'` for the first automatic selection or fallback in uncontrolled roots when `defaultValue` is omitted or `undefined`, including when the implicit initial value is disabled or missing; `'disabled'` for automatic fallback when the selected tab becomes disabled in uncontrolled roots; or `'missing'` for automatic fallback when the selected tab is removed, or when an explicit `defaultValue` never matches a mounted tab in uncontrolled roots. For automatic changes, the selected value can be `null` when no enabled Tab is available as a fallback. Automatic changes cannot be canceled; calling `eventDetails.cancel()` for `'initial'`, `'disabled'`, or `'missing'` has no effect.	`((value: Tabs.Tab.Value, eventDetails: Tabs.Root.ChangeEventDetails) => void)`	—

TabsList

Prop	Type	Default
`activateOnFocus` Whether to automatically change the active tab on arrow key focus. Otherwise, tabs will be activated using Enter or Space key press.	`boolean`	`false`
`loopFocus` Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.	`boolean`	`true`
`variant`	`"default" \| "line"`	`"default"`

TabsTrigger

Prop	Type	Default
`value` The value of the Tab.	`any`	—
`disabled` Whether the Tab is disabled. If a first Tab on a `<Tabs.List>` is disabled, it won't initially be selected. Instead, the next enabled Tab will be selected. However, it does not work like this during server-side rendering, as it is not known during pre-rendering which Tabs are disabled. To work around it, ensure that `defaultValue` or `value` on `<Tabs.Root>` is set to an enabled Tab's value.	`boolean`	—
`nativeButton` Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).	`boolean`	`true`

TabsContent

Prop	Type	Default
`value` The value of the TabPanel. It will be shown when the Tab with the corresponding value is active.	`any`	—
`keepMounted` Whether to keep the HTML element in the DOM while the panel is hidden.	`boolean`	`false`