<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>npx shadcn@latest add @dotui/tabsUse 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>Use the controls below to experiment with different tabs props and see the live preview and code update.
The orientation of the tabs.
Orientation<Tabs orientation="horizontal">
<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>Selected tab: overview
Tabs organize content into multiple sections and allow users to navigate between them.
| Prop | Type | Default | |
|---|---|---|---|
ReactNode | function | — | ||
boolean | — | ||
"automatic" | "manual" | 'automatic' | ||
Orientation | 'horizontal' | ||
DOMRenderFunction<"div", TabsRenderProps> | — | ||
Key | — | ||
Key | — | ||
function | — | ||
Iterable<Key> | — | ||
A TabList is used within Tabs to group tabs that a user can switch between.
| Prop | Type | Default | |
|---|---|---|---|
TabsVariant | "default" | ||
DOMRenderFunction<"div", TabListRenderProps> | — | ||
ReactNode | function | — | ||
Iterable<object> | — | ||
readonly any[] | — | ||
A Tab provides a title for an individual item within a TabList.
| Prop | Type | Default | |
|---|---|---|---|
ReactNode | function | — | ||
Key | — | ||
boolean | — | ||
union | — | ||
A TabPanel provides the content for a tab.
| Prop | Type | Default | |
|---|---|---|---|
ReactNode | function | — | ||
Key | — | ||
DOMRenderFunction<"div", TabPanelRenderProps> | — | ||
boolean | false | ||
Last updated on 5/22/2026