Tabs

A set of layered sections of content that are displayed one at a time.

navigationinteractive

Loading preview...

Installation

npx baseui-cn add tabs

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>

Examples

Basic

Standard tab navigation with the default pill variant.

Loading preview...

Line variant

Underline-style indicator for a minimal look.

Loading preview...

Vertical

Vertical tab orientation — tabs stack on the side.

Loading preview...

Vertical line

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

Loading preview...

Pill style

Tab triggers styled as rounded pills.

Loading preview...

With icons

Tabs with inline SVG icons alongside labels.

Loading preview...

Disabled tab

Individual tabs can be disabled.

Loading preview...

API

TabsList

Prop	Type	Default	Description
`variant`	`"default" \| "underline" \| "line"`	`"default"`	Visual style of the tab list — pill/chip (default) or underline indicator

API Reference

See the Base UI Tabs documentation for the full API reference, including all props, data attributes, and CSS classes.