Tabs

The Tabs component is used to create a tabbed interface.

import { Tabs } from '@cerberus/react'

Usage

The Tabs component is used to create a tabbed interface.

import { Tabs } from '@cerberus/react'
import { Box } from 'styled-system/jsx'

export function BasicTabsPreview() {
  return (
    <Box w="1/2">
      <Tabs.Root defaultValue="overview">
        <Tabs.List>
          <Tabs.Tab value="overview">Overview</Tabs.Tab>
          <Tabs.Tab value="features">Features</Tabs.Tab>
          <Tabs.Tab value="pricing">Pricing</Tabs.Tab>
        </Tabs.List>
        <Tabs.Panel value="overview">Overview content</Tabs.Panel>
        <Tabs.Panel value="features">Features content</Tabs.Panel>
        <Tabs.Panel value="pricing">Pricing content</Tabs.Panel>
      </Tabs.Root>
    </Box>
  )
}

Palette

The palette prop can be used to change the color of the Tabs.

function SecondaryTabsPreview() {
  return (
    <Box w="1/2">
      <Tabs.Root defaultValue="overview-1" palette="secondaryAction">
        <Tabs.List>
          <Tabs.Tab value="overview-1">Overview</Tabs.Tab>
          <Tabs.Tab value="features-1">Features</Tabs.Tab>
          <Tabs.Tab value="pricing-1">Pricing</Tabs.Tab>
        </Tabs.List>
        <Tabs.Panel value="overview-1">Overview content</Tabs.Panel>
        <Tabs.Panel value="features-1">Features content</Tabs.Panel>
        <Tabs.Panel value="pricing-1">Pricing content</Tabs.Panel>
      </Tabs.Root>
    </Box>
  )
}

Orientation

Use the orientation prop to render tabs vertically. The indicatorPlacement prop can be set to "start" (it defaults to "end").

import { Tabs } from '@cerberus/react'
import { Box } from 'styled-system/jsx'

export function VerticalTabsPreview() {
  return (
    <Box w="full">
      <Tabs.Root
        defaultValue="overview"
        orientation="vertical"
        indicatorPlacement="start"
      >
        <Tabs.List>
          <Tabs.Tab value="overview">Overview</Tabs.Tab>
          <Tabs.Tab value="features">Features</Tabs.Tab>
          <Tabs.Tab value="pricing">Pricing</Tabs.Tab>
        </Tabs.List>
        <Tabs.Panel value="overview">Overview content</Tabs.Panel>
        <Tabs.Panel value="features">Features content</Tabs.Panel>
        <Tabs.Panel value="pricing">Pricing content</Tabs.Panel>
      </Tabs.Root>
    </Box>
  )
}

Primitives

You can utilize the primitive components or the css prop to customize the tabs.

Component	Description
TabsRoot	The context provider for the tabs parts
TabsList	The list container of the tabs
TabsTrigger	The tab components of the tabs
TabsIndicator	The indicator of the active tabs state
TabsContent	The panel container for the tabs.

import { Tabs, For } from '@cerberus/react'
import { Box } from 'styled-system/jsx'

function CustomTabsPreview() {
const tabData = [
{
id: 'asphodel',
label: 'Asphodel',
content: 'A peaceful and quiet region of the underworld.',
},
{
id: 'elysium',
label: 'Elysium',
content: 'A paradise for the souls of the heroic and the virtuous.',
},
{
id: 'tartarus',
label: 'Tartarus',
content: 'A deep abyss used as a dungeon of torment and suffering.',
},
]

return (
<Box w="1/2">
<Tabs.Root defaultValue="asphodel">
<Tabs.List
css={{
            bgColor: 'page.surface.200',
            borderBottom: 'none',
            rounded: 'md',
            '& > :is([data-part=indicator])': {
              bgColor: 'danger.surface.initial',
              h: 'var(--height)',
              rounded: 'md',
              zIndex: 'base',
            },
          }} >
{tabData.map((tab) => (
<Tabs.Tab
css={{
                zIndex: 'decorator',
                _selected: {
                  color: 'danger.text.100',
                },
                _after: {
                  display: 'none',
                },
              }}
key={tab.id}
value={tab.value} >
{tab.label}
</Tabs.Tab>
))}
</Tabs.List>

        <For each={tabData}>
          {(tab) => (
            <Tabs.Panel
              key={tab.id}
              value={tab.value}
              css={{
                paddingBlock: 'md',
              }}
            >
              {tab.content}
            </Tabs.Panel>
          )}
        </For>
      </Tabs.Root>
    </Box>

)
}

API

Props

The Tabs component is an abstraction of the primitives and accepts the following props:

Name	Default	Description
palette	`action`	The color palette of the tabs
orientation	`horizontal`	The orientation of the group.
indicatorPlacement	`end`	The position of the active tab indicator. Placement follows the `orientation` flow: `start` renders at the start edge (top or left), `end` at the end edge (bottom or right).

The Tabs.Root component also accepts all the props of the TabsRoot primitive props

Tabs component parts

The Tabs API is an Object containing the full family of abstracted components.

Note

Although the Tabs API is similar to the TabsParts, it returns abstractions of the primitives. The TabsParts return the primitives only.

Name	Description
Root	An abstraction of the `TabsRoot`.
List	An abstraction of the `TabsList` and `TabsIndicator`.
Tab	An abstraction of the `TabsTrigger`.
Panel	An abstraction of the `TabsContent`.

Parts

The TabsParts API is an Object containing the full family of components.

Note

It is best to only use the TabsParts if you are building a custom solution. Importing Object based components will ship every property it includes into your bundle, regardless if you use it or not.

Name	Description
Root	The `TabsRoot` component which is the Provider for the family.
List	The `TabsList` component which is the container for the tabs.
Trigger	The `TabsTrigger` component which is the tab component.
Content	The `TabsContent` component which is the panel container.
Indicator	The `TabsIndicator` component which displays based on the active state.

On this page