Tabs

Navigation elements which make it simple to switch between different views while staying on the main page.

'use client';import { ToggleExample } from '@/app/ui/docs/markdown/ToggleExample';import { Tab, TabGroup, TabList } from '@tremor/react';
export const TabsHero = () => (  <div className="mx-auto max-w-lg space-y-12">    <TabGroup defaultIndex={1}>      <TabList variant="line">        <Tab value="1">tremor.so</Tab>        <Tab value="2">github.com</Tab>        <Tab value="3">strava.com</Tab>      </TabList>    </TabGroup>    <TabGroup>      <TabList variant="solid">        <Tab value="1">tremor.so</Tab>        <Tab value="2">github.com</Tab>        <Tab value="3">strava.com</Tab>      </TabList>    </TabGroup>  </div>);

Import Tabs

Tremor exports five components to create tabs:

TabGroup: Wrapper component to declare tabs
TabList: Wrapper component to declare the clickable items of the tab menu
Tab: Children component representing a clickable tab
TabPanels: Wrapper component to declare a tabs content
TabPanel: Wrapper component to declare content for tab

import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@tremor/react';

Usage example

The example below shows a composition of a tab composition using a Card component and text elements.

Total Sales

$442,276

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

import {  Card,  Tab,  TabGroup,  TabList,  TabPanel,  TabPanels,} from '@tremor/react';
export function TabsUsageExample() {  return (    <Card className="mx-auto max-w-md">      <p className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">Total Sales</p>      <p className="text-tremor-metric text-tremor-content-strong dark:text-dark-tremor-content-strong font-semibold">$442,276</p>      <TabGroup>        <TabList className="mt-4">          <Tab>Location A</Tab>          <Tab>Location B</Tab>        </TabList>        <TabPanels>          <TabPanel>            <p className="mt-4 leading-6 text-tremor-default text-tremor-content dark:text-dark-tremor-content">              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.            </p>          </TabPanel>          <TabPanel>            <p className="mt-4 leading-6 text-tremor-default text-tremor-content dark:text-dark-tremor-content">              Diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.            </p>          </TabPanel>        </TabPanels>      </TabGroup>    </Card>  );}

API Reference: TabGroup

client component

defaultIndex: Sets the default selected index.

index: Set the selected index.

onIndexChange: Event handler called when the active tab changes.

API Reference: TabList

client component

color: Set the color of the selected tab.

variant: Choose between two styles.

API Reference: Tab

client component

icon: Set an optional icon for a Tab.

API Reference: TabPanels

client component

This component does not have any public properties.

API Reference: TabPanel

client component

This component does not have any public properties.

Theming

Tabs (Variant: Line)

Element	Theme Token
Font Size fontSizetremor-border-default	fontSizetremor-border-default
Border color colorstremor-border-DEFAULT	colorstremor-border-DEFAULT
Border color selected colorstremor-brand-DEFAULT	colorstremor-brand-DEFAULT
Border color hover colorstremor-content-DEFAULT	colorstremor-content-DEFAULT
Text & Icon color selected colorstremor-brand-DEFAULT	colorstremor-brand-DEFAULT
Text & Icon color colorstremor-content-DEFAULT	colorstremor-content-DEFAULT
Text & Icon color hover colorstremor-content-emphasis	colorstremor-content-emphasis

Tabs (Variant: Solid)

Element	Theme Token
Font size fontSizetremor-border-default	fontSizetremor-border-default
Background roundness borderRadiustremor-default	borderRadiustremor-default
Background color borderRadiustremor-background-subtle	borderRadiustremor-background-subtle
Tab roundness borderRadiustremor-small	borderRadiustremor-small
Tab border color colorstremor-border-DEFAULT	colorstremor-border-DEFAULT
Tab background color colorstremor-background-DEFAULT	colorstremor-background-DEFAULT
Tab shadow boxShadowtremor-input	boxShadowtremor-input
Text & Icon color selected colorstremor-brand-DEFAULT	colorstremor-brand-DEFAULT
Text & Icon color colorstremor-content-DEFAULT	colorstremor-content-DEFAULT
Text & Icon color hover colorstremor-content-emphasis	colorstremor-content-emphasis