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 tabsTabList
: Wrapper component to declare the clickable items of the tab menuTab
: Children component representing a clickable tabTabPanels
: Wrapper component to declare a tabs contentTabPanel
: 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)
Element | Theme Token |
---|---|
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)
Element | Theme Token |
---|---|
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.