On this page
Overview
Usage
Settings
Overview content
Props
orientation
<Tabs>
<TabList>
<Tab id="overview">Overview</Tab>
<Tab id="usage">Usage</Tab>
<Tab id="settings">Settings</Tab>
</TabList>
<TabPanel id="overview">Overview content</TabPanel>
<TabPanel id="usage">Usage content</TabPanel>
<TabPanel id="settings">Settings content</TabPanel>
</Tabs>Installation
npm
pnpm
yarn
bun
npx shadcn@latest add @dotui/tabsUsage
Use tabs to organize content into multiple sections and allow users to navigate between them.
import { Tab, TabList, TabPanel, Tabs } from '@/components/ui/tabs'<Tabs>
<TabList>
<Tab id="overview">Overview</Tab>
<Tab id="usage">Usage</Tab>
<Tab id="settings">Settings</Tab>
</TabList>
<TabPanel id="overview">Overview content</TabPanel>
<TabPanel id="usage">Usage content</TabPanel>
<TabPanel id="settings">Settings content</TabPanel>
</Tabs>Examples
Overview
Usage
Settings
Overview content
Overview
Usage
Settings
Overview content
Overview
Usage
Settings
Overview content
Overview
Usage
Settings
Overview content
Overview
Usage
Settings
Overview content
Overview
Usage
Settings
Overview content
Overview
Usage
Settings
Overview content
Selected tab: overview
API Reference
Tabs
Tabs organize content into multiple sections and allow users to navigate between them.
| Prop | Type | Default | |
|---|---|---|---|
ReactNode | function | — | ||
boolean | — | ||
"automatic" | "manual" | 'automatic' | ||
Orientation | 'horizontal' | ||
Key | — | ||
Key | — | ||
function | — | ||
Iterable<Key> | — | ||
TabList
A TabList is used within Tabs to group tabs that a user can switch between.
| Prop | Type | Default | |
|---|---|---|---|
TabsVariant | "default" | ||
ReactNode | function | — | ||
Iterable<unknown> | — | ||
readonly any[] | — | ||
Tab
A Tab provides a title for an individual item within a TabList.
| Prop | Type | Default | |
|---|---|---|---|
ReactNode | function | — | ||
Key | — | ||
boolean | — | ||
TabIndicator
An animated indicator of selection state within a group of items.
| Prop | Type | Default | |
|---|---|---|---|
ReactNode | function | — | ||
boolean | — | ||
TabPanel
A TabPanel provides the content for a tab.
| Prop | Type | Default | |
|---|---|---|---|
ReactNode | function | — | ||
Key | — | ||
boolean | false | ||
Last updated on 6/16/2026