dotUI

Tabs

Tabs organize content into multiple sections and allow users to navigate between them.

Docs
Overview content
<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

pnpm dlx shadcn@latest add @dotui/tabs

Usage

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>

Playground

Use the controls below to experiment with different tabs props and see the live preview and code update.

Overview content
orientation

API Reference

Tabs

Tabs organize content into multiple sections and allow users to navigate between them.

PropType
boolean
Orientation
"manual" | "automatic"
ReactNode | function
Key | null
Key
function
Iterable<Key>

TabList

A TabList is used within Tabs to group tabs that a user can switch between.

PropType
ReactNode | function
Iterable<object>
readonly any[]

Tab

A Tab provides a title for an individual item within a TabList.

PropType
Key
boolean
ReactNode | function

TabPanel

A TabPanel provides the content for a tab.

PropType
boolean
Key
ReactNode | function

On this page

On this page

Last updated on 12/21/2025

dotUI

Bringing singularity to the web.

Community

Built with passion by @mehdibha.