Tabs

Manage your account settings and preferences.

Installation

npx shadcn@latest add @assistant-ui/tabs

The @assistant-ui namespace resolves the Radix or Base UI flavor from your project's style through the style-aware registry entry in components.json. Without that entry, add by direct URL instead:

npx shadcn@latest add https://r.assistant-ui.com/base/tabs.json

Main Component

npm install @base-ui/react class-variance-authority

components/ui/tabs.tsx

Usage

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

export function Example() {
  return (
    <Tabs defaultValue="account">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">Account settings here.</TabsContent>
      <TabsContent value="password">Password settings here.</TabsContent>
    </Tabs>
  );
}

Examples

Variants

Use default for a contained control or line for navigation-style tabs.

Default

Line

<TabsList variant="default" />
<TabsList variant="line" />

With icons

Tabs automatically style SVG icons placed inside triggers.

Edit your profile information.

Controlled

Use value and onValueChange for controlled tab state.

Overview content

Current tab: overview

As link

Compose with render in Base UI or asChild in Radix to render a trigger as a link.

Docs API

API Reference

Composable API

Component	Description
`Tabs`	The root component that manages tab state and orientation.
`TabsList`	The container for tab triggers.
`TabsTrigger`	An individual tab control.
`TabsContent`	The content panel for a tab.

TabsProps

defaultValue?string: The initial active tab for uncontrolled state.
value?string: The controlled active tab.
onValueChange?(value: string) => void: Called when the active tab changes.
orientation"horizontal" | "vertical"= "horizontal": The direction of the tab list and keyboard navigation.

TabsList

TabsListProps

variant"default" | "line"= "default": The visual style of the tab list.
className?string: Additional CSS classes.

TabsTrigger

TabsTriggerProps

valuestring: The unique value for the tab.
disabled?boolean: Whether the tab is disabled.
render?ReactElement | function: Base UI: compose as a different element.
asChildboolean= false: Radix: merge props with a child element.

TabsContent

TabsContentProps

valuestring: The value matching the corresponding trigger.
className?string: Additional CSS classes.

Style variants

Export	Description
`tabsListVariants`	Styles for the tab list container.

import { tabsListVariants } from "@/components/ui/tabs";

<div className={tabsListVariants({ variant: "line" })}>
  Custom tab list
</div>