Tabs

Use tabs to let users navigate between related sections of content, displaying one section at a time. Built with Radix UI primitives for full accessibility.

Default Tabs

import * as Tabs from '@radix-ui/react-tabs';

<Tabs.Root defaultValue="past-day" className="radix-tabs">
  <Tabs.List className="radix-tabs-list">
    <Tabs.Trigger value="past-day" className="radix-tabs-trigger">
      Past day
    </Tabs.Trigger>
    <Tabs.Trigger value="past-week" className="radix-tabs-trigger">
      Past week
    </Tabs.Trigger>
    <Tabs.Trigger value="past-month" className="radix-tabs-trigger">
      Past month
    </Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="past-day" className="radix-tabs-content">
    <h4>Past day</h4>
    <p>Content for the past day tab.</p>
  </Tabs.Content>
  <Tabs.Content value="past-week" className="radix-tabs-content">
    <h4>Past week</h4>
    <p>Content for the past week tab.</p>
  </Tabs.Content>
  ...
</Tabs.Root>

Application Tabs

Use tabs to organise different aspects of a single item, such as application details, history, and documents.

<Tabs.Root defaultValue="details" className="radix-tabs">
  <Tabs.List className="radix-tabs-list">
    <Tabs.Trigger value="details" className="radix-tabs-trigger">Details</Tabs.Trigger>
    <Tabs.Trigger value="history" className="radix-tabs-trigger">History</Tabs.Trigger>
    <Tabs.Trigger value="documents" className="radix-tabs-trigger">Documents</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="details" className="radix-tabs-content">...</Tabs.Content>
  <Tabs.Content value="history" className="radix-tabs-content">...</Tabs.Content>
  <Tabs.Content value="documents" className="radix-tabs-content">...</Tabs.Content>
</Tabs.Root>

Controlled Tabs

Use controlled tabs when you need to manage state externally.

const [activeTab, setActiveTab] = useState('details');

<Tabs.Root value={activeTab} onValueChange={setActiveTab}>
  ...
</Tabs.Root>

When to Use Tabs

Use tabs when:

• Content can be separated into logical sections
• Users don't need to see all sections at once
• Section headings are short and clear
• There are 2-5 sections

Don't use tabs when:

• Users need to compare content across sections
• The content is sequential (use step-by-step instead)
• Section headings are long
• There are more than 5 sections
• Content is short enough to show all at once

Usage Guidelines

Do

• Use clear, short labels for tab titles
• Show the most important tab first
• Keep content within tabs focused and related

Don't

• Don't nest tabs within tabs
• Don't use icons only (include text labels)
• Don't disable tabs — remove them if not applicable

Accessibility

• Built with Radix UI primitives for full WAI-ARIA compliance
• Keyboard navigation: Arrow keys to move between tabs, Enter/Space to select
• Automatic ARIA roles and attributes (tablist, tab, tabpanel)
• Focus management between tabs
• Screen reader announces tab selection

CSS Classes

/* Radix Tabs */
.radix-tabs { }
.radix-tabs-list { }
.radix-tabs-trigger { }
.radix-tabs-trigger[data-state="active"] { }
.radix-tabs-content { }

Installation

npm install @radix-ui/react-tabs