1. Components
  2. Tabs

Components

Tabs

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

   

Import Tabs

Tremor exports five component 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

Total Sales

$ 442,276

Product Y

$ 108,799

38%

import {
  ProgressBar,
  Card,
  Flex,
  Text,
  Metric,
  TabList,
  Tab,
  TabGroup,
  TabPanels,
  TabPanel,
} from "@tremor/react";

import { useState } from "react";

import { UserGroupIcon, UserIcon } from "@heroicons/react/solid";

export const TabExample = () => {
  return (
    <Card>
      <Text>Total Sales</Text>
      <Metric>$ 442,276</Metric>
      <TabGroup>
        <TabList className="mt-8">
          <Tab icon={UserGroupIcon}>Location A</Tab>
          <Tab icon={UserIcon}>Location B</Tab>
        </TabList>
        <TabPanels>
          <TabPanel>
            <div className="mt-10">
              <Flex className="mt-4">
                <Text className="w-full">Product Y</Text>
                <Flex className="space-x-2" justifyContent="end">
                  <Text>$ 108,799</Text>
                  <Text>38%</Text>
                </Flex>
              </Flex>
              <ProgressBar value={38} className="mt-2" />
            </div>
          </TabPanel>
          <TabPanel>
            <div className="mt-10">
              <Flex className="mt-4">
                <Text className="w-full">Product Z</Text>
                <Flex className="space-x-2" justifyContent="end">
                  <Text>$ 99,484</Text>
                  <Text>16%</Text>
                </Flex>
              </Flex>
              <ProgressBar value={12} className="mt-2" />
            </div>
          </TabPanel>
        </TabPanels>
      </TabGroup>
    </Card>
  );
};

Theming

Tabs (Variant: Line)

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

Tabs (Variant: Solid)

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

API Reference: TabGroup

client component

defaultIndexoptional
Description
Sets the default selected index.
Type
number
Default
Values
E.g. { 1 }
indexoptional
Description
Set the selected index.
Type
number
Default
Values
E.g. 1
onIndexChangeoptional
Description
Event handler called when the active tab changes.
Type
function
Default
Values

API Reference: TabList

client component

coloroptional
Description
Set the color of the selected tab.
Type
string
Default
blue
Values
See color sections
variantoptional
Description
Choose between two styles.
Type
string
Default
line
Values
line, solid

API Reference: Tab

client component

iconoptional
Description
Set an optional icon for a Tab.
Type
React.ElementType
Default
undefined
Values

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.

Need help? You can also ask the community on GitHub Discussions or Slack.

TableText Input