Tabs

Installation

pnpm dlx shadcn@latest add @spaceui/primitives-tabs

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>

Anatomy

<Tabs>
  <TabsList>
    <TabsTab />
    <TabsIndicator />
  </TabsList>
  <TabsPanel />
</Tabs>

Features

Variants

Tabs in rounded button style (default) and border line style (underline).

Sizes

Tabs triggers in sm, default, and lg sizes.

Accessibility

• Follows the WAI-ARIA Tabs Pattern.
• Tab triggers and panels are linked via aria-controls and aria-labelledby.

Keyboard Interactions

Vertical Orientation

Tabs navigation arranged vertically using orientation="vertical".

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.

TabsTab

Individual tab trigger. Styled wrapper for Tabs.Tab from Base UI. Also exported as TabsTrigger.

TabsPanel

Content panel for each tab. Styled wrapper for Tabs.Panel from Base UI. Also exported as TabsContent.

TabsIndicator

Visual indicator for the active tab. Styled wrapper for Tabs.Indicator from Base UI.

Examples