Tabs

Installation

npx baseui-cn add tabs

The CLI installs styles/navigation.styles.css alongside the component. For manual installation, copy that stylesheet from the registry and keep the component import. It uses the existing semantic theme variables.

Usage

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

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Account settings.</TabsContent>
  <TabsContent value="password">Password settings.</TabsContent>
</Tabs>

System specimen

Navigation and disclosure together, with controlled tabs, disclosure, page selection and the existing Menubar.

Examples

Basic

Standard tab navigation with a quiet neutral indicator.

Line variant

Underline-style indicator for a minimal look.

Vertical

Vertical tab orientation — tabs stack on the side.

Vertical line

Vertical orientation with the line variant — indicator on the side.

Pill style

Tab triggers styled as rounded pills.

With icons

Tabs with inline SVG icons alongside labels.

Disabled tab

Individual tabs can be disabled.

API

TabsList