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 two components to create tabs:

  • TabList: Wrapper component to declare tabs
  • Tab: Children component representing a tab
import { TabList, Tab } from "@tremor/react";

Anatomy

How the basic component is pieced together displaying all properties with their default values.

import { TabList, Tab } from "@tremor/react";

export default () => (
  <TabList
    defaultValue={undefined}
    value={undefined}
    onValueChange={undefined}
    color="blue"
    marginTop="mt-0">
      <Tab
        text=""
        value={undefined}
        icon={undefined}
      />
  </TabList>
);

Usage example

Total Sales

$ 442,276

Product A

$ 100,838

(38%)

Product B

$ 90,224

(34%)

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

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

import { useState } from "react";

const LocationA = [
  {
    name: "Product A",
    percentage: 38,
    stat: "$ 100,838",
  },
  {
    name: "Product B",
    percentage: 34,
    stat: "$ 90,224",
  },
];

const LocationB = [
  {
    name: "Product Z",
    percentage: 82,
    stat: "$ 108,799",
  },
  {
    name: "Product E",
    percentage: 10,
    stat: "$ 13,268",
  },
];

export default () => {
  const [showCard, setShowCard] = useState(true);
  return (
<Card>
    <>
        <Text>Total Sales</Text>
        <Metric>$ 442,276</Metric>
        <TabList
            defaultValue={ 1 }
            handleSelect={ (value) => setShowCard(value === 1) }
            marginTop="mt-6"
        >
            <Tab value={ 1 } text="Peer performance" icon={ UserGroupIcon }/>
            <Tab value={ 2 } text="Individual performance" icon={ UserIcon }/>
        </TabList>
    </>

    { showCard === true ? (
        <div className="mt-6">
            { LocationA.map((item) => (
                <div className="mt-4" key={ item.name }>
                    <Flex marginTop="mt-4">
                        <Text>{ item.name }</Text>
                        <Flex spaceX="space-x-2" justifyContent="justify-end">
                            <Text>
                                { ' ' }
                                { item.stat }
                                { ' ' }
                            </Text>
                            <Text>
                                { ' ' }
                                (
                                { item.percentage }
                                %)
                            </Text>
                        </Flex>
                    </Flex>
                    <ProgressBar percentageValue={ item.percentage } marginTop="mt-2" />
                </div>
            )) }
        </div>
    ) : (
        <div className="mt-6">
            { LocationB.map((item) => (
                <div className="mt-4" key={ item.name }>
                    <Flex marginTop="mt-4">
                        <Flex>
                            <Text>
                                { ' ' }
                                { item.name }
                                { ' ' }
                            </Text>
                        </Flex>
                        <Flex spaceX="space-x-2" justifyContent="justify-end">
                            <Text>
                                { ' ' }
                                { item.percentage }
                                %
                                { ' ' }
                            </Text>
                            <Text>
                                { ' ' }
                                (
                                { item.stat }
                                )
                                { ' ' }
                            </Text>
                        </Flex>
                    </Flex>
                    <ProgressBar percentageValue={ item.percentage } marginTop="mt-2" />
                </div>
            )) }
        </div>
    ) }
</Card>
  );
};

Controlled state example

The example below shows a Tabs composition with a controlled state.

import { useState } from "react";
import { TabList, Tab } from "@tremor/react";

export default () => {
	const [value, setValue] = useState(null);

	return (
		<TabList value={value} onValueChange={ setValue }>
        <Tab value={5} text={'Five'} />
        <Tab value={3} text={'Three'} />
        <Tab value={1} text={'One'} />
    </TabList>
	);
}

API Reference: TabList

defaultValueoptional
Description
Sets the default selected tab item in an uncontrolled setting.
Type
any
Default
-
Values
E.g. { 1 }
valueoptional
Description
The controlled state of a Tab. Must be used in conjunction with onValueChange.
Type
any
Default
-
Values
E.g. { 1 }
onValueChangeoptional
Description
Event handler called when the state of the TabList changes.
Type
function
Default
Values
coloroptional
Description
Set the color of the selected tab.
Type
string
Default
blue
Values
See color sections
marginTopoptional
Description
Controls the top margin.
Type
string
Default
mt-0

API Reference: Tab

text
Description
Sets the tab text.
Type
string
Default
-
Values
value
Description
Assign an identifier to the tab for reference in the TabList component.
Type
any
Default
-
Values
E.g. { 1 }
iconoptional
Description
Set an optional icon for a Tab.
Type
React.ElementType
Default
undefined
Values
coloroptional
Description
Set the color indivdually of a selected tab.
Type
string
Default
blue
Values
See color sections