Tabs

A component for toggling between related panels on the same page.

API Reference

Preview

Installation

Usage

import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs"
<Tabs defaultValue="tab-1">
  <TabsList>
    <TabsTab value="tab-1">Tab 1</TabsTab>
    <TabsTab value="tab-2">Tab 2</TabsTab>
    <TabsTab value="tab-3">Tab 3</TabsTab>
  </TabsList>
  <TabsPanel value="tab-1">Tab 1 content</TabsPanel>
  <TabsPanel value="tab-2">Tab 2 content</TabsPanel>
  <TabsPanel value="tab-3">Tab 3 content</TabsPanel>
</Tabs>

API Reference

Tabs

Root component. Styled wrapper for Tabs.Root from Base UI.

TabsList

Container for tab triggers. Styled wrapper for Tabs.List from Base UI with a built-in Tabs.Indicator.

TabsTab

Individual tab trigger. Styled wrapper for Tabs.Tab from Base UI.

TabsPanel

Content panel for each tab. Styled wrapper for Tabs.Panel from Base UI.

Examples

Vertical Orientation