UI

Tabs

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

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.

API Reference: TabGroup

client component
defaultIndex
number
Sets the default selected index.
index
number
Set the selected index.
onIndexChange
function
Event handler called when the active tab changes.

API Reference: TabList

client component
color
Color
Set the color of the selected tab.
variant
string
Choose between two styles.

API Reference: Tab

client component
icon
React.ElementType
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)

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