ComponentCompound

Tabs

A tabbed interface with compound components, ARIA support, and keyboard navigation. Uses the headless @refraction-ui/tabs core.

Live Example

A realistic settings page with account, notification, and billing tabs.

Account Settings

Manage your account details and preferences.

Display Name

Jane Cooper

jane@example.com

Role

Admin

Installation

$pnpm add @refraction-ui/react-tabs

Usage

tsx

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@refraction-ui/react'

export function MyTabs() {
  return (
    <Tabs defaultValue="overview">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="features">Features</TabsTrigger>
        <TabsTrigger value="api">API</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">
        <p>Overview content here.</p>
      </TabsContent>
      <TabsContent value="features">
        <p>Features content here.</p>
      </TabsContent>
      <TabsContent value="api">
        <p>API reference here.</p>
      </TabsContent>
    </Tabs>
  )
}

Tabs Props

Prop	Type	Default	Description
`value`	`string`	--	Controlled active tab value.
`defaultValue`	`string`	`''`	Initial tab for uncontrolled usage.
`onValueChange`	`(value: string) => void`	--	Callback when the active tab changes.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Orientation of the tab list.
`className`	`string`	--	Additional CSS classes on the root element.

Compound Components

Prop	Type	Default	Description
`TabsList`	`HTMLAttributes<HTMLDivElement>`	--	Container for tab triggers with role="tablist".
`TabsTrigger`	`ButtonHTMLAttributes & { value: string }`	--	Tab button. The value prop links it to its content panel.
`TabsContent`	`HTMLAttributes<HTMLDivElement> & { value: string }`	--	Tab panel. Only renders when its value matches the active tab.