Tabs

The Tabs component provides a way to organize content into separate views that can be navigated through tabs.

Usage

import { Tabs } from '@harnessio/ui/components'

//...

return (
  <Tabs.Root defaultValue="tab1">
    <Tabs.List>
      <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
      <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content value="tab1">Content 1</Tabs.Content>
    <Tabs.Content value="tab2">Content 2</Tabs.Content>
  </Tabs.Root>
)

Anatomy

All parts of the Tabs component can be imported and composed as required.

<Tabs.Root defaultValue="tab1">
  <Tabs.List>
    <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="tab1">Content 1</Tabs.Content>
  <Tabs.Content value="tab2">Content 2</Tabs.Content>
</Tabs.Root>

API Reference

Root

The root component for the tabs.

<Tabs.Root
  defaultValue="tab1"      // Default value of the selected tab
  value="tab1"             // [OPTIONAL] Value of the tab
  variant="default"        // [OPTIONAL] Variant of the tabs
  fontSize="sm"            // [OPTIONAL] Font size of the tabs
  className="custom-class" // [OPTIONAL] Custom class name
>
  {/* Tabs content */}
</Tabs.Root>

Prop	Required	Default	Type
defaultValue	true		string
value	false		string
variant	false		'default' | 'underline' | 'navigation' | 'tabnav'
fontSize	false		'xs' | 'sm'
className	false		string

List

The list component that contains the tab triggers.

<Tabs.List
  className="custom-class" // [OPTIONAL] Custom class name
  variant="default"        // [OPTIONAL] Variant of the tabs
  fontSize="sm"            // [OPTIONAL] Font size of the tabs
>
  <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
  <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
</Tabs.List>

Prop	Required	Default	Type
className	false		string
variant	false		'default' | 'underline' | 'navigation' | 'tabnav'
fontSize	false		'xs' | 'sm'

Trigger

The trigger component for individual tabs.

<Tabs.Trigger
  value="tab1"             // Value of the tab
  className="custom-class" // [OPTIONAL] Custom class name
  variant="default"        // [OPTIONAL] Variant of the tabs
>
  Tab 1
</Tabs.Trigger>

Prop	Required	Default	Type
className	false		string
variant	false		'default' | 'underline' | 'navigation' | 'tabnav'
value	true		string

Content

The content component for individual tabs.

<Tabs.Content
  value="tab1"             // Value of the tab
  className="custom-class" // [OPTIONAL] Custom class name
  variant="default"        // [OPTIONAL] Variant of the tabs
>
  Content 1
</Tabs.Content>

Prop	Required	Default	Type
className	false		string
variant	false		'default' | 'underline' | 'navigation' | 'tabnav'
value	true		string