<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>Tabs organize content into multiple sections and allow users to navigate between them.
| Prop | Type | Default | |
|---|---|---|---|
boolean | — | ||
Orientation | 'horizontal' | ||
"manual" | "automatic" | 'automatic' | ||
ReactNode | function | — | ||
Key | null | — | ||
Key | — | ||
function | — | ||
Iterable<Key> | — | ||
A TabList is used within Tabs to group tabs that a user can switch between.
| Prop | Type | Default | |
|---|---|---|---|
ReactNode | function | — | ||
Iterable<object> | — | ||
readonly any[] | — | ||
A Tab provides a title for an individual item within a TabList.
| Prop | Type | Default | |
|---|---|---|---|
Key | — | ||
boolean | — | ||
ReactNode | function | — | ||
A TabPanel provides the content for a tab.
| Prop | Type | Default | |
|---|---|---|---|
boolean | false | ||
Key | — | ||
ReactNode | function | — | ||
Last updated on 1/13/2026
Bringing singularity to the web.
Built with passion by @mehdibha.