Tabs

Navigation

Stablev1.0.0

Tabbed interface component for organizing content into separate views. Built with Ariakit.

Preview

Account settings content goes here.

Posts content

Installation

npx @component-labs/cli add tabs

This will:
- Install required dependencies
- Copy the Tabs component to your project
- Add utility functions (cn helper)

Make sure you've initialized Component Labs first:
```bash
npx @component-labs/cli init
```

Usage

import { Tabs, TabList, Tab, TabPanel } from "@component-labs/ui";

<Tabs defaultSelectedId="tab1">
  <TabList>
    <Tab id="tab1">Account</Tab>
    <Tab id="tab2">Password</Tab>
    <Tab id="tab3">Settings</Tab>
  </TabList>

  <TabPanel tabId="tab1">
    <p>Account settings content</p>
  </TabPanel>

  <TabPanel tabId="tab2">
    <p>Password settings content</p>
  </TabPanel>

  <TabPanel tabId="tab3">
    <p>General settings content</p>
  </TabPanel>
</Tabs>

Props

Name	Type	Default	Description
`Tabs.variant`	`"default" \| "outline" \| "underline"`	`"default"`	Visual style variant applied to all tabs
`Tabs.defaultSelectedId`	`string`	`-`	Default selected tab ID (uncontrolled)
`Tabs.selectedId`	`string`	`-`	Controlled selected tab ID
`Tabs.onSelectIdChange`	`(id: string \| null) => void`	`-`	Callback when selected tab changes
`TabList`	`Component`	`-`	Container for Tab components
`Tab.id*`	`string`	`-`	Unique identifier for the tab
`Tab.disabled`	`boolean`	`-`	Whether the tab is disabled
`TabPanel.tabId*`	`string`	`-`	ID of the tab this panel belongs to
`className`	`string`	`-`	Additional CSS classes (applies to all components)

Examples

Basic

Simple tabs with default style

<Tabs defaultSelectedId="tab1">
  <TabList>
    <Tab id="tab1">Account</Tab>
    <Tab id="tab2">Password</Tab>
    <Tab id="tab3">Settings</Tab>
  </TabList>

  <TabPanel tabId="tab1">
    <p>Account settings content</p>
  </TabPanel>

  <TabPanel tabId="tab2">
    <p>Password settings content</p>
  </TabPanel>

  <TabPanel tabId="tab3">
    <p>General settings content</p>
  </TabPanel>
</Tabs>

Outline Variant

Tabs with outline style

<Tabs variant="outline" defaultSelectedId="overview">
  <TabList>
    <Tab id="overview">Overview</Tab>
    <Tab id="analytics">Analytics</Tab>
    <Tab id="reports">Reports</Tab>
  </TabList>

  <TabPanel tabId="overview">Overview content</TabPanel>
  <TabPanel tabId="analytics">Analytics content</TabPanel>
  <TabPanel tabId="reports">Reports content</TabPanel>
</Tabs>

Underline Variant

Tabs with underline style

<Tabs variant="underline" defaultSelectedId="posts">
  <TabList>
    <Tab id="posts">Posts</Tab>
    <Tab id="comments">Comments</Tab>
    <Tab id="likes">Likes</Tab>
  </TabList>

  <TabPanel tabId="posts">Posts content</TabPanel>
  <TabPanel tabId="comments">Comments content</TabPanel>
  <TabPanel tabId="likes">Likes content</TabPanel>
</Tabs>

Controlled

Controlled tabs with state

const [activeTab, setActiveTab] = useState("tab1");

<Tabs selectedId={activeTab} onSelectIdChange={setActiveTab}>
  <TabList>
    <Tab id="tab1">Tab 1</Tab>
    <Tab id="tab2">Tab 2</Tab>
  </TabList>

  <TabPanel tabId="tab1">Content 1</TabPanel>
  <TabPanel tabId="tab2">Content 2</TabPanel>
</Tabs>

With Disabled Tab

Tabs with disabled option

<Tabs defaultSelectedId="available">
  <TabList>
    <Tab id="available">Available</Tab>
    <Tab id="upcoming" disabled>Upcoming</Tab>
    <Tab id="archived">Archived</Tab>
  </TabList>

  <TabPanel tabId="available">Available content</TabPanel>
  <TabPanel tabId="upcoming">Upcoming content</TabPanel>
  <TabPanel tabId="archived">Archived content</TabPanel>
</Tabs>

Performance

Bundle Size

~3KB gzipped

Minified and gzipped

Dependencies

•@ariakit/react
•class-variance-authority
•clsx
•tailwind-merge

Accessibility

•Full keyboard navigation support (Arrow keys, Home, End)
•Proper ARIA attributes for tabs pattern
•Screen reader friendly
•Focus management and visual indicators