Tabs

Ready

Organize content into tabbed interfaces with keyboard navigation

Looking for a simpler toggle? Use Segmented Control for state switches without content panels (e.g., View: List/Grid, Billing: Monthly/Yearly).

Default Variant

Pill-style tabs with indigo-50 background container

View your project overview, recent activity, and key metrics at a glance.

Lined Variant

Underline-style tabs with bottom border indicator

View your project overview, recent activity, and key metrics at a glance.

Tabs with Icons

Add icons to tab triggers

Display Name

Bio

Form in Tabs

Complete form with save action

Name

Installation

Install the required dependencies

npm install @radix-ui/react-tabs

Usage

Basic implementation example

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'

export default function Example() {
  return (
    <Tabs defaultValue="tab1">
      <TabsList>
        <TabsTrigger value="tab1">Tab 1</TabsTrigger>
        <TabsTrigger value="tab2">Tab 2</TabsTrigger>
        <TabsTrigger value="tab3">Tab 3</TabsTrigger>
      </TabsList>
      <TabsContent value="tab1">
        Content for tab 1
      </TabsContent>
      <TabsContent value="tab2">
        Content for tab 2
      </TabsContent>
      <TabsContent value="tab3">
        Content for tab 3
      </TabsContent>
    </Tabs>
  )
}

Props

Tabs component props

Prop	Type	Default	Description
defaultValue	string	-	Initially active tab
value	string	-	Controlled active tab
onValueChange	(value: string) => void	-	Callback when tab changes
variant	'default' \| 'lined'	'default'	Visual style variant
orientation	'horizontal' \| 'vertical'	'horizontal'	Tab orientation

Features

Built-in functionality

Keyboard navigation - Arrow keys to switch tabs
Automatic activation - Tab content loads on selection
Accessible - ARIA roles and keyboard support
Smooth transitions - 200ms transition on state change
Icon support - Add icons to tab triggers
Two variants - Default (pill) and Lined (underline) styles
6px border radius - Consistent with Eidetic design

Tabs vs Segmented Control

When to use which component

Feature	Tabs	Segmented Control
Content Panels	✅ Yes (TabsContent)	❌ No
Use Case	Switch between content areas	Toggle states/filters only
Visual Variants	2 variants (default, lined)	3 variants (default, filled, outline)
Sizes	1 size	3 sizes (sm, md, lg)
Animated Indicator	❌ No	✅ Yes (sliding animation)
Icon Support	✅ Manual	✅ Built-in prop
Example	Settings → Account/Profile tabs	View: List/Grid, Monthly/Yearly