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

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

API Reference: Tab