Tabs

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

Overview

Usage

Settings

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

npm

pnpm

yarn

bun

npx 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>

Anatomy

import { Tab, TabList, TabPanel, Tabs } from '@/components/ui/tabs'

<Tabs>
  <TabList>
    <Tab id="…" />
  </TabList>
  <TabPanel id="…" />
</Tabs>

Tabs provides selection state, TabList groups the Tab titles, and each TabPanel renders the content for the Tab whose id matches.

Selection

Each Tab and TabPanel is keyed by id. Use defaultSelectedKey for uncontrolled state, or selectedKey with onSelectionChange to control it.

const [selectedKey, setSelectedKey] = React.useState('overview')

<Tabs selectedKey={selectedKey} onSelectionChange={setSelectedKey}>
  {/* … */}
</Tabs>

Keyboard activation

By default, focusing a tab with the arrow keys selects it. Set keyboardActivation="manual" to require Enter or Space to switch panels.

<Tabs keyboardActivation="manual">{/* … */}</Tabs>

Links

Pass href to a Tab to render an anchor for tab-based navigation. Use it with your client router's link integration for internal routes.

<Tab href="/overview">Overview</Tab>

Examples

Basic Tabs

Overview

Usage

Settings

Overview content

Settings Panel

General

Notifications

Personalization

Timezone

Auto-saveSave changes as you type.

Documentation Tabs

Overview

Code

API

The useToggle hook manages a boolean state and returns a setter to flip it.

Product Details

Aero Runner

$129.00

In stock

Description

Specs

Reviews

Lightweight trainers built for daily mileage, with a breathable knit upper and responsive foam midsole.

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 7/7/2026