Tabs

Tabs is used to group and display a set of related elements.

Import

copy
import {
  Tab,
  Tabs,
  TabList,
  TabPanel,
  TabPanels,
  useTabs,
} from '@tonic-ui/react';
import {
  Tab,
  Tabs,
  TabList,
  TabPanel,
  TabPanels,
  useTabs,
} from '@tonic-ui/react';

Usage

Basic tabs

Here is a basic example of tabs.

EDITABLE EXAMPLE
copy
<Tabs>
  <TabList>
    <Tab>TAB 1</Tab>
    <Tab>TAB 2</Tab>
    <Tab>TAB 3</Tab>
  </TabList>
  <TabPanels px="3x" py="2x">
    <TabPanel>
      Tab Panel 1
    </TabPanel>
    <TabPanel>
      Tab Panel 2
    </TabPanel>
    <TabPanel>
      Tab Panel 3
    </TabPanel>
  </TabPanels>
</Tabs>
<Tabs>
  <TabList>
    <Tab>TAB 1</Tab>
    <Tab>TAB 2</Tab>
    <Tab>TAB 3</Tab>
  </TabList>
  <TabPanels px="3x" py="2x">
    <TabPanel>
      Tab Panel 1
    </TabPanel>
    <TabPanel>
      Tab Panel 2
    </TabPanel>
    <TabPanel>
      Tab Panel 3
    </TabPanel>
  </TabPanels>
</Tabs>

TabList and TabPanels are used to group the tabs and tab panels. If you don't need the tabs to be grouped, you can use Tab and TabPanel directly.

copy
<Tabs>
  <Tab>TAB 1</Tab>
  <Tab>TAB 2</Tab>
  <Tab>TAB 3</Tab>
  <TabPanel>Tab Panel 1</TabPanel>
  <TabPanel>Tab Panel 2</TabPanel>
  <TabPanel>Tab Panel 3</TabPanel>
</Tabs>
<Tabs>
  <Tab>TAB 1</Tab>
  <Tab>TAB 2</Tab>
  <Tab>TAB 3</Tab>
  <TabPanel>Tab Panel 1</TabPanel>
  <TabPanel>Tab Panel 2</TabPanel>
  <TabPanel>Tab Panel 3</TabPanel>
</Tabs>

Controlled and uncontrolled tabs

The index prop is used to control which tab is selected. The onChange callback returns the selected tab index whenever the user changes the tab. If you intend to control the tabs programmatically, use the onChange callback to update the index prop.

EDITABLE EXAMPLE
copy
function Example() {
  const [index, setIndex] = React.useState('tab1');

  return (
    <Tabs
      index={index}
      onChange={index => setIndex(index)}
    >
      <TabList>
        <Tab index="tab1">TAB 1</Tab>
        <Tab index="tab2">TAB 2</Tab>
        <Tab index="tab3">TAB 3</Tab>
      </TabList>
      <TabPanels px="3x" py="2x">
        <TabPanel index="tab1">
          Tab Panel 1
        </TabPanel>
        <TabPanel index="tab2">
          Tab Panel 2
        </TabPanel>
        <TabPanel index="tab3">
          Tab Panel 3
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
}
function Example() {
  const [index, setIndex] = React.useState('tab1');

  return (
    <Tabs
      index={index}
      onChange={index => setIndex(index)}
    >
      <TabList>
        <Tab index="tab1">TAB 1</Tab>
        <Tab index="tab2">TAB 2</Tab>
        <Tab index="tab3">TAB 3</Tab>
      </TabList>
      <TabPanels px="3x" py="2x">
        <TabPanel index="tab1">
          Tab Panel 1
        </TabPanel>
        <TabPanel index="tab2">
          Tab Panel 2
        </TabPanel>
        <TabPanel index="tab3">
          Tab Panel 3
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
}

For uncontrolled tabs, you can use the defaultIndex prop to set the initial selected tab.

EDITABLE EXAMPLE
copy
<Tabs defaultIndex={0}>
  <TabList>
    <Tab>TAB 1</Tab>
    <Tab>TAB 2</Tab>
    <Tab>TAB 3</Tab>
  </TabList>
  <TabPanels px="3x" py="2x">
    <TabPanel>
      Tab Panel 1
    </TabPanel>
    <TabPanel>
      Tab Panel 2
    </TabPanel>
    <TabPanel>
      Tab Panel 3
    </TabPanel>
  </TabPanels>
</Tabs>
<Tabs defaultIndex={0}>
  <TabList>
    <Tab>TAB 1</Tab>
    <Tab>TAB 2</Tab>
    <Tab>TAB 3</Tab>
  </TabList>
  <TabPanels px="3x" py="2x">
    <TabPanel>
      Tab Panel 1
    </TabPanel>
    <TabPanel>
      Tab Panel 2
    </TabPanel>
    <TabPanel>
      Tab Panel 3
    </TabPanel>
  </TabPanels>
</Tabs>

Orientation and variants

Tabs can either be oriented horizontally or vertically, and can also be styled with different variants.

• Use the orientation prop to set the orientation of the tabs. It accepts horizontal and vertical as values.
• Use the variant prop to set the variant of the tabs. It accepts default, filled, and unstyled as values.

EDITABLE EXAMPLE
copy
function Example() {
  const [orientation, setOrientation] = React.useState('horizontal');
  const [variant, setVariant] = React.useState('default');
  const [colorMode] = useColorMode();
  const [colorStyle] = useColorStyle({ colorMode });

  return (
    <>
      <Box mb="4x">
        <Box mb="2x">
          <TextLabel>
            orientation
          </TextLabel>
        </Box>
        <ButtonGroup>
          <Button
            onClick={() => setOrientation('horizontal')}
            variant={orientation === 'horizontal' ? 'primary' : 'secondary'}
          >
            horizontal
          </Button>
          <Button
            onClick={() => setOrientation('vertical')}
            variant={orientation === 'vertical' ? 'primary' : 'secondary'}
          >
            vertical
          </Button>
        </ButtonGroup>
      </Box>
      <Box mb="4x">
        <Box mb="2x">
          <TextLabel>
            variant
          </TextLabel>
        </Box>
        <ButtonGroup>
          <Button
            onClick={() => setVariant('default')}
            variant={variant === 'default' ? 'primary' : 'secondary'}
          >
            default
          </Button>
          <Button
            onClick={() => setVariant('filled')}
            variant={variant === 'filled' ? 'primary' : 'secondary'}
          >
            filled
          </Button>
          <Button
            onClick={() => setVariant('unstyled')}
            variant={variant === 'unstyled' ? 'primary' : 'secondary'}
          >
            unstyled
          </Button>
        </ButtonGroup>
      </Box>
      <Divider mb="4x" />
      <Tabs
        orientation={orientation}
        variant={variant}
      >
        <TabList>
          <Tab>TAB 1</Tab>
          <Tab>TAB 2</Tab>
          <Tab>TAB 3</Tab>
        </TabList>
        <TabPanels px="3x" py="2x">
          <TabPanel>
            Tab Panel 1
          </TabPanel>
          <TabPanel>
            Tab Panel 2
          </TabPanel>
          <TabPanel>
            Tab Panel 3
          </TabPanel>
        </TabPanels>
      </Tabs>
    </>
  );
}
function Example() {
  const [orientation, setOrientation] = React.useState('horizontal');
  const [variant, setVariant] = React.useState('default');
  const [colorMode] = useColorMode();
  const [colorStyle] = useColorStyle({ colorMode });

  return (
    <>
      <Box mb="4x">
        <Box mb="2x">
          <TextLabel>
            orientation
          </TextLabel>
        </Box>
        <ButtonGroup>
          <Button
            onClick={() => setOrientation('horizontal')}
            variant={orientation === 'horizontal' ? 'primary' : 'secondary'}
          >
            horizontal
          </Button>
          <Button
            onClick={() => setOrientation('vertical')}
            variant={orientation === 'vertical' ? 'primary' : 'secondary'}
          >
            vertical
          </Button>
        </ButtonGroup>
      </Box>
      <Box mb="4x">
        <Box mb="2x">
          <TextLabel>
            variant
          </TextLabel>
        </Box>
        <ButtonGroup>
          <Button
            onClick={() => setVariant('default')}
            variant={variant === 'default' ? 'primary' : 'secondary'}
          >
            default
          </Button>
          <Button
            onClick={() => setVariant('filled')}
            variant={variant === 'filled' ? 'primary' : 'secondary'}
          >
            filled
          </Button>
          <Button
            onClick={() => setVariant('unstyled')}
            variant={variant === 'unstyled' ? 'primary' : 'secondary'}
          >
            unstyled
          </Button>
        </ButtonGroup>
      </Box>
      <Divider mb="4x" />
      <Tabs
        orientation={orientation}
        variant={variant}
      >
        <TabList>
          <Tab>TAB 1</Tab>
          <Tab>TAB 2</Tab>
          <Tab>TAB 3</Tab>
        </TabList>
        <TabPanels px="3x" py="2x">
          <TabPanel>
            Tab Panel 1
          </TabPanel>
          <TabPanel>
            Tab Panel 2
          </TabPanel>
          <TabPanel>
            Tab Panel 3
          </TabPanel>
        </TabPanels>
      </Tabs>
    </>
  );
}

Decorate horizontal tabs with a bottom border

To decorate horizontal tabs with a bottom border, you can pass __after prop to TabList to render a bottom border.

EDITABLE EXAMPLE
copy
const MyTabGroup = (props) => {
  const [colorMode] = useColorMode();
  const [colorStyle] = useColorStyle({ colorMode });
  return (
    <TabList
      position="relative"
      __after={{
        content: '""',
        borderBottom: 1,
        borderBottomColor: colorStyle.divider,
        position: 'absolute',
        bottom: 0,
        width: '100%',
        ...props.__after,
      }}
      {...props}
    />
  );
};

function Example() {
  const [colorMode] = useColorMode();
  const [colorStyle] = useColorStyle({ colorMode });
  return (
    <Flex flexDirection="column" rowGap="4x">
      <Box>
        <Text fontSize="lg" lineHeight="lg" mb="2x">
          Left-aligned
        </Text>
        <Box backgroundColor={colorStyle.background.secondary} p="4x">
          <Tabs>
            <MyTabGroup justifyContent="flex-start">
              <Tab>TAB 1</Tab>
              <Tab>TAB 2</Tab>
              <Tab>TAB 3</Tab>
            </MyTabGroup>
          </Tabs>
        </Box>
      </Box>
      <Box>
        <Text fontSize="lg" lineHeight="lg" mb="2x">
          Centered
        </Text>
        <Box backgroundColor={colorStyle.background.secondary} p="4x">
          <Tabs>
            <MyTabGroup justifyContent="center">
              <Tab>TAB 1</Tab>
              <Tab>TAB 2</Tab>
              <Tab>TAB 3</Tab>
            </MyTabGroup>
          </Tabs>
        </Box>
      </Box>
      <Box>
        <Text fontSize="lg" lineHeight="lg" mb="2x">
          Right-aligned
        </Text>
        <Box backgroundColor={colorStyle.background.secondary} p="4x">
          <Tabs>
            <MyTabGroup justifyContent="flex-end">
              <Tab>TAB 1</Tab>
              <Tab>TAB 2</Tab>
              <Tab>TAB 3</Tab>
            </MyTabGroup>
          </Tabs>
        </Box>
      </Box>
      <Box>
        <Text fontSize="lg" lineHeight="lg" mb="2x">
          Full width
        </Text>
        <Box backgroundColor={colorStyle.background.secondary} p="4x">
          <Tabs>
            <MyTabGroup>
              <Tab width="100%">TAB 1</Tab>
              <Tab width="100%">TAB 2</Tab>
              <Tab width="100%">TAB 3</Tab>
            </MyTabGroup>
          </Tabs>
        </Box>
      </Box>
      <Box>
        <Text fontSize="lg" lineHeight="lg" mb="2x">
          Auto-sizing
        </Text>
        <Box backgroundColor={colorStyle.background.secondary} p="4x">
          <Tabs>
            <MyTabGroup display="inline-flex">
              <Tab>TAB 1</Tab>
              <Tab>TAB 2</Tab>
              <Tab>TAB 3</Tab>
            </MyTabGroup>
          </Tabs>
        </Box>
      </Box>
    </Flex>
  );
}

render(<Example />);
const MyTabGroup = (props) => {
  const [colorMode] = useColorMode();
  const [colorStyle] = useColorStyle({ colorMode });
  return (
    <TabList
      position="relative"
      __after={{
        content: '""',
        borderBottom: 1,
        borderBottomColor: colorStyle.divider,
        position: 'absolute',
        bottom: 0,
        width: '100%',
        ...props.__after,
      }}
      {...props}
    />
  );
};

function Example() {
  const [colorMode] = useColorMode();
  const [colorStyle] = useColorStyle({ colorMode });
  return (
    <Flex flexDirection="column" rowGap="4x">
      <Box>
        <Text fontSize="lg" lineHeight="lg" mb="2x">
          Left-aligned
        </Text>
        <Box backgroundColor={colorStyle.background.secondary} p="4x">
          <Tabs>
            <MyTabGroup justifyContent="flex-start">
              <Tab>TAB 1</Tab>
              <Tab>TAB 2</Tab>
              <Tab>TAB 3</Tab>
            </MyTabGroup>
          </Tabs>
        </Box>
      </Box>
      <Box>
        <Text fontSize="lg" lineHeight="lg" mb="2x">
          Centered
        </Text>
        <Box backgroundColor={colorStyle.background.secondary} p="4x">
          <Tabs>
            <MyTabGroup justifyContent="center">
              <Tab>TAB 1</Tab>
              <Tab>TAB 2</Tab>
              <Tab>TAB 3</Tab>
            </MyTabGroup>
          </Tabs>
        </Box>
      </Box>
      <Box>
        <Text fontSize="lg" lineHeight="lg" mb="2x">
          Right-aligned
        </Text>
        <Box backgroundColor={colorStyle.background.secondary} p="4x">
          <Tabs>
            <MyTabGroup justifyContent="flex-end">
              <Tab>TAB 1</Tab>
              <Tab>TAB 2</Tab>
              <Tab>TAB 3</Tab>
            </MyTabGroup>
          </Tabs>
        </Box>
      </Box>
      <Box>
        <Text fontSize="lg" lineHeight="lg" mb="2x">
          Full width
        </Text>
        <Box backgroundColor={colorStyle.background.secondary} p="4x">
          <Tabs>
            <MyTabGroup>
              <Tab width="100%">TAB 1</Tab>
              <Tab width="100%">TAB 2</Tab>
              <Tab width="100%">TAB 3</Tab>
            </MyTabGroup>
          </Tabs>
        </Box>
      </Box>
      <Box>
        <Text fontSize="lg" lineHeight="lg" mb="2x">
          Auto-sizing
        </Text>
        <Box backgroundColor={colorStyle.background.secondary} p="4x">
          <Tabs>
            <MyTabGroup display="inline-flex">
              <Tab>TAB 1</Tab>
              <Tab>TAB 2</Tab>
              <Tab>TAB 3</Tab>
            </MyTabGroup>
          </Tabs>
        </Box>
      </Box>
    </Flex>
  );
}

render(<Example />);

Access the state of tabs

Sometimes you need to access the state of tabs. For example, you may want to lazily load the content of a tab when that tab is selected.

Tabs, Tab, and TabPanel components expose internal state using Function as Children (FaCC). This is not a recommended approach, but it is useful for this use case.

EDITABLE EXAMPLE
copy
<Tabs defaultIndex={1}>
  {({ index: selectedIndex }) => (
    <>
      <Box mb="2x">
        TAB {selectedIndex} is selected
      </Box>
      <TabList>
        {[1, 2, 3].map(tabIndex => (
          <Tab key={tabIndex} index={tabIndex}>
            {({ getTabProps, disabled, index, variant }) => {
              return (
                <Box {...getTabProps()}>
                  TAB {index}
                </Box>
              );
            }}
          </Tab>
        ))}
      </TabList>
      <TabPanels px="3x" py="2x">
        {[1, 2, 3].map(tabPanelIndex => (
          <TabPanel key={tabPanelIndex} index={tabPanelIndex}>
            {({ getTabPanelProps, index, variant }) => {
              return (
                <Box {...getTabPanelProps()}>
                  Tab Panel {index}
                </Box>
              );
            }}
          </TabPanel>
        ))}
      </TabPanels>
    </>
  )}
</Tabs>
<Tabs defaultIndex={1}>
  {({ index: selectedIndex }) => (
    <>
      <Box mb="2x">
        TAB {selectedIndex} is selected
      </Box>
      <TabList>
        {[1, 2, 3].map(tabIndex => (
          <Tab key={tabIndex} index={tabIndex}>
            {({ getTabProps, disabled, index, variant }) => {
              return (
                <Box {...getTabProps()}>
                  TAB {index}
                </Box>
              );
            }}
          </Tab>
        ))}
      </TabList>
      <TabPanels px="3x" py="2x">
        {[1, 2, 3].map(tabPanelIndex => (
          <TabPanel key={tabPanelIndex} index={tabPanelIndex}>
            {({ getTabPanelProps, index, variant }) => {
              return (
                <Box {...getTabPanelProps()}>
                  Tab Panel {index}
                </Box>
              );
            }}
          </TabPanel>
        ))}
      </TabPanels>
    </>
  )}
</Tabs>

Tabs with dropdown menus

The tab with the dropdown menu is usually the last tab. You can use event.preventDefault() to control whether the tab will be selected when the user clicks the dropdown menu.

EDITABLE EXAMPLE
copy
<Tabs variant="default">
  <TabList>
    <Tab>TAB 1</Tab>
    <Tab>TAB 2</Tab>
    <Tab
      onClick={(event) => {
        const value = event.target.getAttribute('value');
        if (!value) {
          event.preventDefault();
          return;
        }
        console.log('Menu Item ' + value + ' clicked');
      }}
    >
      <Menu>
        <MenuToggle alignItems="center">
          TAB 3
          <Space width="1x" />
          <MenuToggleIcon />
        </MenuToggle>
        <MenuList
          skidding={-14}
          distance={10}
          width="max-content"
        >
          <MenuItem value={1}>Menu Item 1</MenuItem>
          <MenuItem value={2}>Menu Item 2</MenuItem>
          <MenuItem value={3}>Menu Item 3</MenuItem>
        </MenuList>
      </Menu>
    </Tab>
  </TabList>
</Tabs>
<Tabs variant="default">
  <TabList>
    <Tab>TAB 1</Tab>
    <Tab>TAB 2</Tab>
    <Tab
      onClick={(event) => {
        const value = event.target.getAttribute('value');
        if (!value) {
          event.preventDefault();
          return;
        }
        console.log('Menu Item ' + value + ' clicked');
      }}
    >
      <Menu>
        <MenuToggle alignItems="center">
          TAB 3
          <Space width="1x" />
          <MenuToggleIcon />
        </MenuToggle>
        <MenuList
          skidding={-14}
          distance={10}
          width="max-content"
        >
          <MenuItem value={1}>Menu Item 1</MenuItem>
          <MenuItem value={2}>Menu Item 2</MenuItem>
          <MenuItem value={3}>Menu Item 3</MenuItem>
        </MenuList>
      </Menu>
    </Tab>
  </TabList>
</Tabs>

Draggable tabs with dropdown menus

Use react-beautiful-dnd to make tabs draggable.

EDITABLE EXAMPLE
copy
// a little function to help us with reordering the result
const reorder = (list, startIndex, endIndex) => {
  const result = Array.from(list);
  const [removed] = result.splice(startIndex, 1);
  result.splice(endIndex, 0, removed);
  return result;
};

render(() => {
  const [items, setItems] = React.useState([
    {
      id: 'tab-1',
      label: 'TAB 1',
      content: 'TAB 1',
      dropdown: {
        items: [
          { id: 'menuitem-1', label: 'Menu Item 1' },
          { id: 'menuitem-2', label: 'Menu Item 2' },
          { id: 'menuitem-3', label: 'Menu Item 3' },
        ],
      },
    },
    {
      id: 'tab-2',
      label: 'TAB 2',
      content: 'TAB 2',
    },
    {
      id: 'tab-3',
      label: 'TAB 3',
      content: 'TAB 3',
    },
  ]);
  const onDragEnd = (result) => {
    // dropped outside the list
    if (!result.destination) {
      return;
    }

    const nextItems = reorder(items, result.source.index, result.destination.index);
    setItems(nextItems);
  };

  return (
    <Tabs
      orientation="horizontal"
    >
      <rbd.DragDropContext
        onDragEnd={onDragEnd}
      >
        <rbd.Droppable
          droppableId="droppable"
          direction="horizontal"
        >
          {(droppableProvided, droppableSnapshot) => (
            <TabList
              ref={droppableProvided.innerRef}
              {...droppableProvided.droppableProps}
            >
              {items.map((item, index) => (
                <rbd.Draggable
                  key={item.id}
                  draggableId={item.id}
                  index={index}
                >
                  {(draggableProvided, draggableSnapshot) => (
                    <Box
                      ref={draggableProvided.innerRef}
                      {...draggableProvided.draggableProps}
                      {...draggableProvided.dragHandleProps}
                      style={{
                        ...draggableProvided.draggableProps.style,
                      }}
                    >
                      {!item.dropdown && (
                        <Tab
                          as={Box}
                          index={index}
                        >
                          {item.label}
                        </Tab>
                      )}
                      {item.dropdown && (
                        <Tab
                          as={Box}
                          onClick={(event) => {
                            const value = event.target.getAttribute('value');
                            if (!value) {
                              event.preventDefault();
                              return;
                            }
                            console.log('Menu Item ' + value + ' clicked');
                          }}
                        >
                          <Menu>
                            <MenuToggle alignItems="center">
                              {item.label}
                              <Space width="1x" />
                              <MenuToggleIcon />
                            </MenuToggle>
                            <MenuList
                              skidding={-14}
                              distance={10}
                              width="max-content"
                            >
                              {item.dropdown.items.map(x => (
                                <MenuItem key={x.id} value={x.id}>
                                  {x.label}
                                </MenuItem>
                              ))}
                            </MenuList>
                          </Menu>
                        </Tab>
                      )}
                    </Box>
                  )}
                </rbd.Draggable>
              ))}
              {droppableProvided.placeholder}
            </TabList>
          )}
        </rbd.Droppable>
      </rbd.DragDropContext>
      <TabPanels px="3x" py="2x">
        {items.map((item, index) => (
          <TabPanel
            key={item.id}
            index={index}
          >
            {item.content}
          </TabPanel>
        ))}
      </TabPanels>
    </Tabs>
  );
});
// a little function to help us with reordering the result
const reorder = (list, startIndex, endIndex) => {
  const result = Array.from(list);
  const [removed] = result.splice(startIndex, 1);
  result.splice(endIndex, 0, removed);
  return result;
};

render(() => {
  const [items, setItems] = React.useState([
    {
      id: 'tab-1',
      label: 'TAB 1',
      content: 'TAB 1',
      dropdown: {
        items: [
          { id: 'menuitem-1', label: 'Menu Item 1' },
          { id: 'menuitem-2', label: 'Menu Item 2' },
          { id: 'menuitem-3', label: 'Menu Item 3' },
        ],
      },
    },
    {
      id: 'tab-2',
      label: 'TAB 2',
      content: 'TAB 2',
    },
    {
      id: 'tab-3',
      label: 'TAB 3',
      content: 'TAB 3',
    },
  ]);
  const onDragEnd = (result) => {
    // dropped outside the list
    if (!result.destination) {
      return;
    }

    const nextItems = reorder(items, result.source.index, result.destination.index);
    setItems(nextItems);
  };

  return (
    <Tabs
      orientation="horizontal"
    >
      <rbd.DragDropContext
        onDragEnd={onDragEnd}
      >
        <rbd.Droppable
          droppableId="droppable"
          direction="horizontal"
        >
          {(droppableProvided, droppableSnapshot) => (
            <TabList
              ref={droppableProvided.innerRef}
              {...droppableProvided.droppableProps}
            >
              {items.map((item, index) => (
                <rbd.Draggable
                  key={item.id}
                  draggableId={item.id}
                  index={index}
                >
                  {(draggableProvided, draggableSnapshot) => (
                    <Box
                      ref={draggableProvided.innerRef}
                      {...draggableProvided.draggableProps}
                      {...draggableProvided.dragHandleProps}
                      style={{
                        ...draggableProvided.draggableProps.style,
                      }}
                    >
                      {!item.dropdown && (
                        <Tab
                          as={Box}
                          index={index}
                        >
                          {item.label}
                        </Tab>
                      )}
                      {item.dropdown && (
                        <Tab
                          as={Box}
                          onClick={(event) => {
                            const value = event.target.getAttribute('value');
                            if (!value) {
                              event.preventDefault();
                              return;
                            }
                            console.log('Menu Item ' + value + ' clicked');
                          }}
                        >
                          <Menu>
                            <MenuToggle alignItems="center">
                              {item.label}
                              <Space width="1x" />
                              <MenuToggleIcon />
                            </MenuToggle>
                            <MenuList
                              skidding={-14}
                              distance={10}
                              width="max-content"
                            >
                              {item.dropdown.items.map(x => (
                                <MenuItem key={x.id} value={x.id}>
                                  {x.label}
                                </MenuItem>
                              ))}
                            </MenuList>
                          </Menu>
                        </Tab>
                      )}
                    </Box>
                  )}
                </rbd.Draggable>
              ))}
              {droppableProvided.placeholder}
            </TabList>
          )}
        </rbd.Droppable>
      </rbd.DragDropContext>
      <TabPanels px="3x" py="2x">
        {items.map((item, index) => (
          <TabPanel
            key={item.id}
            index={index}
          >
            {item.content}
          </TabPanel>
        ))}
      </TabPanels>
    </Tabs>
  );
});

Scrollable tabs

Scrollable tabs are useful when the tab list is longer than the tab container. You can use the following code to create a scrollable tabs.

This example teaches you how to create a scrollable tabs that supports drag-to-scroll behavior. Scrolling tabs is currently not part of this component library.

EDITABLE EXAMPLE
copy
const easeInOutSin = (time) => {
  return (1 + Math.sin(Math.PI * time - Math.PI / 2)) / 2;
};

const animate = (property, element, to, options = {}, cb = () => {}) => {
  const {
    ease = easeInOutSin,
    duration = 300, // standard
  } = options;

  let start = null;
  const from = element[property];
  let cancelled = false;

  const cancel = () => {
    cancelled = true;
  };

  const step = (timestamp) => {
    if (cancelled) {
      cb(new Error('Animation cancelled'));
      return;
    }

    if (start === null) {
      start = timestamp;
    }
    const time = Math.min(1, (timestamp - start) / duration);

    element[property] = ease(time) * (to - from) + from;

    if (time >= 1) {
      requestAnimationFrame(() => {
        cb(null);
      });
      return;
    }

    requestAnimationFrame(step);
  };

  if (from === to) {
    cb(new Error('Element already at target position'));
    return cancel;
  }

  requestAnimationFrame(step);
  return cancel;
};

const debounce = (func, wait = 166) => {
  let timeout;
  function debounced(...args) {
    const later = () => {
      func.apply(this, args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  }

  debounced.clear = () => {
    clearTimeout(timeout);
  };

  return debounced;
}

const IconButton = (props) => {
  const [colorMode] = useColorMode();
  const [colorStyle] = useColorStyle({ colorMode });
  return (
    <ButtonBase
      px="2x"
      color={colorStyle.color.secondary}
      tabIndex={0}
      _disabled={{
        color: colorStyle.color.disabled,
      }}
      _hover={{
        color: colorStyle.color.primary,
      }}
      {...props}
    />
  );
};

const StartScrollIndicator = React.forwardRef((props, ref) => (
  <Box
    ref={ref}
    position="relative"
    __after={{
      content: '""',
      position: 'absolute',
      top: 0,
      bottom: 0,
      left: 0,
      width: '4x',
      background: 'linear-gradient(to right, rgba(21, 21, 21, 1) 0%, rgba(21, 21, 21, 0) 100%)',
    }}
    {...props}
  />
));

const EndScrollIndicator = React.forwardRef((props, ref) => (
  <Box
    ref={ref}
    position="relative"
    __after={{
      content: '""',
      position: 'absolute',
      top: 0,
      bottom: 0,
      right: 0,
      width: '4x',
      background: 'linear-gradient(to left, rgba(21, 21, 21, 1) 0%, rgba(21, 21, 21, 0) 100%)',
    }}
    {...props}
  />
));

const useDragToScroll = (ref, options) => {
  const {
    direction = 'both', // One of: 'vertical', 'horizontal', 'both'
  } = { ...options };

  const position = {
    scrollTop: 0,
    scrollLeft: 0,
    mouseX: 0,
    mouseY: 0,
  };

  React.useEffect(() => {
    const el = ref && ref.current;
    if (!el) {
      return;
    }

    const mouseMoveHandler = (event) => {
      const dx = event.clientX - position.mouseX;
      const dy = event.clientY - position.mouseY;
      if (direction !== 'horizontal') {
        el.scrollTop = position.scrollTop - dy;
      }
      if (direction !== 'vertical') {
        el.scrollLeft = position.scrollLeft - dx;
      }
    };

    const mouseUpHandler = () => {
      el.style.cursor = 'grab';
      el.style.removeProperty('user-select');
      document.removeEventListener('mousemove', mouseMoveHandler);
      document.removeEventListener('mouseup', mouseUpHandler);
    };

    const onMouseDown = (event) => {
      position.scrollLeft = el.scrollLeft;
      position.scrollTop = el.scrollTop;
      position.mouseX = event.clientX;
      position.mouseY = event.clientY;
      el.style.cursor = 'grabbing';
      el.style.userSelect = 'none';
      document.addEventListener('mousemove', mouseMoveHandler);
      document.addEventListener('mouseup', mouseUpHandler);
    };

    el.addEventListener('mousedown', onMouseDown);
    return () => {
      el.removeEventListener('mousedown', onMouseDown);
    }
  }, [ref]);

  return position;
};

function Example() {
  const startScrollIndicatorRef = React.useRef();
  const endScrollIndicatorRef = React.useRef();
  const [colorMode] = useColorMode();
  const orientation = 'horizontal';
  const scrollStart = (orientation === 'vertical') ? 'scrollTop' : 'scrollLeft';
  const clientSize = (orientation === 'vertical') ? 'clientHeight' : 'clientWidth';
  const [displayScroll, setDisplayScroll] = React.useState({
    start: false,
    end: false,
  });
  const tabScrollerRef = React.useRef(null);
  const tabListRef = React.useRef(null);
  const position = useDragToScroll(tabScrollerRef);

  const scroll = (scrollValue, { animation = true } = {}) => {
    if (animation) {
      animate(scrollStart, tabScrollerRef.current, scrollValue, {
        duration: 300,
      });
    } else {
      tabScrollerRef.current[scrollStart] = scrollValue;
    }
  };
  const moveTabsScroll = (delta) => {
    let scrollValue = tabScrollerRef.current[scrollStart];
    scrollValue += delta;
    scroll(scrollValue);
  };
  // TODO: use Intersection Observer API to get expected scroll position
  const getScrollSize = () => {
    const containerSize = tabScrollerRef.current[clientSize];
    let totalSize = 0;
    const children = Array.from(tabListRef.current.children);
    for (let i = 0; i < children.length; i += 1) {
      const tab = children[i];
      if (totalSize + tab[clientSize] > containerSize) {
        break;
      }
      totalSize += tab[clientSize];
    }
    return totalSize;
  };
  const handleScrollTabs = React.useMemo(() => {
    return debounce(() => {
      updateScrollButtonState();
      updateScrollIndicatorOpacity();
    }, Math.floor(1000 / 60));
  }, [updateScrollButtonState]);
  const handleStartScrollClick = () => {
    moveTabsScroll(-1 * getScrollSize());
  };
  const handleEndScrollClick = () => {
    moveTabsScroll(getScrollSize());
  };
  const updateScrollButtonState = React.useCallback(() => {
    let showStartScroll;
    let showEndScroll;

    if (orientation === 'vertical') {
      const { scrollTop, scrollHeight, clientHeight } = tabScrollerRef.current;
      showStartScroll = scrollTop > 1;
      showEndScroll = scrollTop < scrollHeight - clientHeight - 1;
    } else {
      const { scrollLeft, scrollWidth, clientWidth } = tabScrollerRef.current;
      // use 1 for the potential rounding error with browser zooms.
      showStartScroll = scrollLeft > 1;
      showEndScroll = scrollLeft < scrollWidth - clientWidth - 1;
    }

    if ((showStartScroll !== displayScroll.start) || (showEndScroll !== displayScroll.end)) {
      setDisplayScroll({
        start: showStartScroll,
        end: showEndScroll,
      });
    }
  }, []);
  const updateScrollIndicatorOpacity = () => {
    const { scrollLeft, scrollWidth, clientWidth } = tabScrollerRef.current;
    const startScrollOpacity = 1 / 20 * Math.min(scrollLeft, 20);
    const endScrollOpacity = 1 / 20 * ((scrollWidth - clientWidth) - Math.max(scrollLeft, (scrollWidth - clientWidth - 20)));
    if (startScrollIndicatorRef.current) {
      startScrollIndicatorRef.current.style.opacity = startScrollOpacity;
    }
    if (endScrollIndicatorRef.current) {
      endScrollIndicatorRef.current.style.opacity = endScrollOpacity;
    }
  };

  React.useEffect(() => {
    return () => {
      handleScrollTabs.clear();
    };
  }, [handleScrollTabs]);

  React.useEffect(() => {
    updateScrollButtonState();
    updateScrollIndicatorOpacity();
  }, []);

  return (
    <Tabs>
      <Flex>
        <IconButton
          disabled={!displayScroll.start}
          onClick={handleStartScrollClick}
        >
          <Icon icon="angle-left" />
        </IconButton>
        <StartScrollIndicator ref={startScrollIndicatorRef} />
        <Box
          ref={tabScrollerRef}
          maxWidth={280}
          overflowX="hidden"
          whiteSpace="nowrap"
          onScroll={handleScrollTabs}
        >
          <TabList
            ref={tabListRef}
          >
            <Tab>TAB 1</Tab>
            <Tab>TAB 2</Tab>
            <Tab>TAB 3</Tab>
            <Tab>TAB 4</Tab>
            <Tab>TAB 5</Tab>
            <Tab>TAB 6</Tab>
            <Tab>TAB 7</Tab>
            <Tab>TAB 8</Tab>
            <Tab>TAB 9</Tab>
            <Tab>TAB 10</Tab>
          </TabList>
        </Box>
        <EndScrollIndicator ref={endScrollIndicatorRef} />
        <IconButton
          disabled={!displayScroll.end}
          onClick={handleEndScrollClick}
        >
          <Icon icon="angle-right" />
        </IconButton>
      </Flex>
      <TabPanels px="3x" py="2x">
        <TabPanel>
          Tab Panel 1
        </TabPanel>
        <TabPanel>
          Tab Panel 2
        </TabPanel>
        <TabPanel>
          Tab Panel 3
        </TabPanel>
        <TabPanel>
          Tab Panel 4
        </TabPanel>
        <TabPanel>
          Tab Panel 5
        </TabPanel>
        <TabPanel>
          Tab Panel 6
        </TabPanel>
        <TabPanel>
          Tab Panel 7
        </TabPanel>
        <TabPanel>
          Tab Panel 8
        </TabPanel>
        <TabPanel>
          Tab Panel 9
        </TabPanel>
        <TabPanel>
          Tab Panel 10
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
}

render(<Example />);
const easeInOutSin = (time) => {
  return (1 + Math.sin(Math.PI * time - Math.PI / 2)) / 2;
};

const animate = (property, element, to, options = {}, cb = () => {}) => {
  const {
    ease = easeInOutSin,
    duration = 300, // standard
  } = options;

  let start = null;
  const from = element[property];
  let cancelled = false;

  const cancel = () => {
    cancelled = true;
  };

  const step = (timestamp) => {
    if (cancelled) {
      cb(new Error('Animation cancelled'));
      return;
    }

    if (start === null) {
      start = timestamp;
    }
    const time = Math.min(1, (timestamp - start) / duration);

    element[property] = ease(time) * (to - from) + from;

    if (time >= 1) {
      requestAnimationFrame(() => {
        cb(null);
      });
      return;
    }

    requestAnimationFrame(step);
  };

  if (from === to) {
    cb(new Error('Element already at target position'));
    return cancel;
  }

  requestAnimationFrame(step);
  return cancel;
};

const debounce = (func, wait = 166) => {
  let timeout;
  function debounced(...args) {
    const later = () => {
      func.apply(this, args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  }

  debounced.clear = () => {
    clearTimeout(timeout);
  };

  return debounced;
}

const IconButton = (props) => {
  const [colorMode] = useColorMode();
  const [colorStyle] = useColorStyle({ colorMode });
  return (
    <ButtonBase
      px="2x"
      color={colorStyle.color.secondary}
      tabIndex={0}
      _disabled={{
        color: colorStyle.color.disabled,
      }}
      _hover={{
        color: colorStyle.color.primary,
      }}
      {...props}
    />
  );
};

const StartScrollIndicator = React.forwardRef((props, ref) => (
  <Box
    ref={ref}
    position="relative"
    __after={{
      content: '""',
      position: 'absolute',
      top: 0,
      bottom: 0,
      left: 0,
      width: '4x',
      background: 'linear-gradient(to right, rgba(21, 21, 21, 1) 0%, rgba(21, 21, 21, 0) 100%)',
    }}
    {...props}
  />
));

const EndScrollIndicator = React.forwardRef((props, ref) => (
  <Box
    ref={ref}
    position="relative"
    __after={{
      content: '""',
      position: 'absolute',
      top: 0,
      bottom: 0,
      right: 0,
      width: '4x',
      background: 'linear-gradient(to left, rgba(21, 21, 21, 1) 0%, rgba(21, 21, 21, 0) 100%)',
    }}
    {...props}
  />
));

const useDragToScroll = (ref, options) => {
  const {
    direction = 'both', // One of: 'vertical', 'horizontal', 'both'
  } = { ...options };

  const position = {
    scrollTop: 0,
    scrollLeft: 0,
    mouseX: 0,
    mouseY: 0,
  };

  React.useEffect(() => {
    const el = ref && ref.current;
    if (!el) {
      return;
    }

    const mouseMoveHandler = (event) => {
      const dx = event.clientX - position.mouseX;
      const dy = event.clientY - position.mouseY;
      if (direction !== 'horizontal') {
        el.scrollTop = position.scrollTop - dy;
      }
      if (direction !== 'vertical') {
        el.scrollLeft = position.scrollLeft - dx;
      }
    };

    const mouseUpHandler = () => {
      el.style.cursor = 'grab';
      el.style.removeProperty('user-select');
      document.removeEventListener('mousemove', mouseMoveHandler);
      document.removeEventListener('mouseup', mouseUpHandler);
    };

    const onMouseDown = (event) => {
      position.scrollLeft = el.scrollLeft;
      position.scrollTop = el.scrollTop;
      position.mouseX = event.clientX;
      position.mouseY = event.clientY;
      el.style.cursor = 'grabbing';
      el.style.userSelect = 'none';
      document.addEventListener('mousemove', mouseMoveHandler);
      document.addEventListener('mouseup', mouseUpHandler);
    };

    el.addEventListener('mousedown', onMouseDown);
    return () => {
      el.removeEventListener('mousedown', onMouseDown);
    }
  }, [ref]);

  return position;
};

function Example() {
  const startScrollIndicatorRef = React.useRef();
  const endScrollIndicatorRef = React.useRef();
  const [colorMode] = useColorMode();
  const orientation = 'horizontal';
  const scrollStart = (orientation === 'vertical') ? 'scrollTop' : 'scrollLeft';
  const clientSize = (orientation === 'vertical') ? 'clientHeight' : 'clientWidth';
  const [displayScroll, setDisplayScroll] = React.useState({
    start: false,
    end: false,
  });
  const tabScrollerRef = React.useRef(null);
  const tabListRef = React.useRef(null);
  const position = useDragToScroll(tabScrollerRef);

  const scroll = (scrollValue, { animation = true } = {}) => {
    if (animation) {
      animate(scrollStart, tabScrollerRef.current, scrollValue, {
        duration: 300,
      });
    } else {
      tabScrollerRef.current[scrollStart] = scrollValue;
    }
  };
  const moveTabsScroll = (delta) => {
    let scrollValue = tabScrollerRef.current[scrollStart];
    scrollValue += delta;
    scroll(scrollValue);
  };
  // TODO: use Intersection Observer API to get expected scroll position
  const getScrollSize = () => {
    const containerSize = tabScrollerRef.current[clientSize];
    let totalSize = 0;
    const children = Array.from(tabListRef.current.children);
    for (let i = 0; i < children.length; i += 1) {
      const tab = children[i];
      if (totalSize + tab[clientSize] > containerSize) {
        break;
      }
      totalSize += tab[clientSize];
    }
    return totalSize;
  };
  const handleScrollTabs = React.useMemo(() => {
    return debounce(() => {
      updateScrollButtonState();
      updateScrollIndicatorOpacity();
    }, Math.floor(1000 / 60));
  }, [updateScrollButtonState]);
  const handleStartScrollClick = () => {
    moveTabsScroll(-1 * getScrollSize());
  };
  const handleEndScrollClick = () => {
    moveTabsScroll(getScrollSize());
  };
  const updateScrollButtonState = React.useCallback(() => {
    let showStartScroll;
    let showEndScroll;

    if (orientation === 'vertical') {
      const { scrollTop, scrollHeight, clientHeight } = tabScrollerRef.current;
      showStartScroll = scrollTop > 1;
      showEndScroll = scrollTop < scrollHeight - clientHeight - 1;
    } else {
      const { scrollLeft, scrollWidth, clientWidth } = tabScrollerRef.current;
      // use 1 for the potential rounding error with browser zooms.
      showStartScroll = scrollLeft > 1;
      showEndScroll = scrollLeft < scrollWidth - clientWidth - 1;
    }

    if ((showStartScroll !== displayScroll.start) || (showEndScroll !== displayScroll.end)) {
      setDisplayScroll({
        start: showStartScroll,
        end: showEndScroll,
      });
    }
  }, []);
  const updateScrollIndicatorOpacity = () => {
    const { scrollLeft, scrollWidth, clientWidth } = tabScrollerRef.current;
    const startScrollOpacity = 1 / 20 * Math.min(scrollLeft, 20);
    const endScrollOpacity = 1 / 20 * ((scrollWidth - clientWidth) - Math.max(scrollLeft, (scrollWidth - clientWidth - 20)));
    if (startScrollIndicatorRef.current) {
      startScrollIndicatorRef.current.style.opacity = startScrollOpacity;
    }
    if (endScrollIndicatorRef.current) {
      endScrollIndicatorRef.current.style.opacity = endScrollOpacity;
    }
  };

  React.useEffect(() => {
    return () => {
      handleScrollTabs.clear();
    };
  }, [handleScrollTabs]);

  React.useEffect(() => {
    updateScrollButtonState();
    updateScrollIndicatorOpacity();
  }, []);

  return (
    <Tabs>
      <Flex>
        <IconButton
          disabled={!displayScroll.start}
          onClick={handleStartScrollClick}
        >
          <Icon icon="angle-left" />
        </IconButton>
        <StartScrollIndicator ref={startScrollIndicatorRef} />
        <Box
          ref={tabScrollerRef}
          maxWidth={280}
          overflowX="hidden"
          whiteSpace="nowrap"
          onScroll={handleScrollTabs}
        >
          <TabList
            ref={tabListRef}
          >
            <Tab>TAB 1</Tab>
            <Tab>TAB 2</Tab>
            <Tab>TAB 3</Tab>
            <Tab>TAB 4</Tab>
            <Tab>TAB 5</Tab>
            <Tab>TAB 6</Tab>
            <Tab>TAB 7</Tab>
            <Tab>TAB 8</Tab>
            <Tab>TAB 9</Tab>
            <Tab>TAB 10</Tab>
          </TabList>
        </Box>
        <EndScrollIndicator ref={endScrollIndicatorRef} />
        <IconButton
          disabled={!displayScroll.end}
          onClick={handleEndScrollClick}
        >
          <Icon icon="angle-right" />
        </IconButton>
      </Flex>
      <TabPanels px="3x" py="2x">
        <TabPanel>
          Tab Panel 1
        </TabPanel>
        <TabPanel>
          Tab Panel 2
        </TabPanel>
        <TabPanel>
          Tab Panel 3
        </TabPanel>
        <TabPanel>
          Tab Panel 4
        </TabPanel>
        <TabPanel>
          Tab Panel 5
        </TabPanel>
        <TabPanel>
          Tab Panel 6
        </TabPanel>
        <TabPanel>
          Tab Panel 7
        </TabPanel>
        <TabPanel>
          Tab Panel 8
        </TabPanel>
        <TabPanel>
          Tab Panel 9
        </TabPanel>
        <TabPanel>
          Tab Panel 10
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
}

render(<Example />);

Customization

Tabs also come with an unstyled variant. It's useful for doing customizations.

EDITABLE EXAMPLE
copy
const CustomTabList = (props) => {
  const context = useTabs();
  const orientation = context.orientation;
  const [colorMode] = useColorMode();
  const [colorStyle] = useColorStyle({ colorMode });
  let styleProps = {
    backgroundColor: colorStyle.background.primary,
    position: 'relative',
  };

  if (orientation === 'horizontal') {
    styleProps = {
      ...styleProps,
      __after: {
        content: '""',
        borderBottom: 1,
        borderBottomColor: colorStyle.divider,
        position: 'absolute',
        bottom: 0,
        width: '100%',
      },
    };
  }

  if (orientation === 'vertical') {
    styleProps = {
      ...styleProps,
      alignItems: 'flex-start',
    };
  }

  return (
    <TabList
      {...styleProps}
      {...props}
    />
  );
};

const CustomTab = ({ children, ...rest }) => {
  const context = useTabs();
  const orientation = context.orientation;
  const [colorMode] = useColorMode();
  const [colorStyle] = useColorStyle({ colorMode });
  const { colors } = useTheme();
  const baseStyle = {
    backgroundColor: colorStyle.background.primary,
    color: colorStyle.color.secondary,
    px: '4x',
    py: '3x',
    position: 'relative',
    zIndex: 1,
    _disabled: {
      color: colorStyle.color.disabled,
      cursor: 'not-allowed',
    },
    _hover: {
      color: colorStyle.color.primary,
    },
  };

  if (orientation === 'horizontal') {
    const styleProps = {
      ...baseStyle,
      border: 1,
      borderColor: colorStyle.divider,
      _notLastOfType: {
        borderRight: 'none',
      },
      _selected: {
        borderBottomColor: 'transparent',
        background: colorStyle.background.primary,
        color: colorStyle.color.primary,
        '::before': {
          content: '""',
          position: 'absolute',
          top: -1,
          left: -1,
          right: 0,
          height: 3,
          backgroundColor: '#2cc185',
        },
      },
    };

    return (
      <Tab
        {...styleProps}
        {...rest}
      >
        {children}
      </Tab>
    );
  }

  if (orientation === 'vertical') {
    const styleProps = {
      ...baseStyle,
      borderBottom: 1,
      borderBottomColor: colorStyle.divider,
      textAlign: 'left',
      width: '100%',
      _selected: {
        borderLeftColor: colorStyle.background.primary,
        background: colorStyle.background.primary,
        color: colorStyle.color.primary,
        '::before': {
          content: '""',
          position: 'absolute',
          top: 0,
          bottom: 0,
          left: 0,
          width: 3,
          backgroundColor: '#2cc185',
        },
      },
    };

    return (
      <Tab
        {...styleProps}
        {...rest}
      >
        {({ getTabProps, index, isSelected }) => (
          <Box
            {...getTabProps()}
            pr="1x"
          >
            <Flex justifyContent="space-between">
              <Box>{children}</Box>
              <Icon icon="chevron-right" ml="4x" visibility={isSelected ? 'visible' : 'hidden'} />
            </Flex>
          </Box>
        )}
      </Tab>
    );
  }

  return null;
};

function Example() {
  const [orientation, setOrientation] = React.useState('horizontal');
  const [colorMode] = useColorMode();
  const [colorStyle] = useColorStyle({ colorMode });

  return (
    <>
      <Box mb="2x">
        <TextLabel>
          orientation
        </TextLabel>
      </Box>
      <ButtonGroup>
        <Button
          onClick={() => setOrientation('horizontal')}
          variant={orientation === 'horizontal' ? 'primary' : 'secondary'}
        >
          Horizontal
        </Button>
        <Button
          onClick={() => setOrientation('vertical')}
          variant={orientation === 'vertical' ? 'primary' : 'secondary'}
        >
          Vertical
        </Button>
      </ButtonGroup>
      <Divider my="4x" />
      <Tabs
        orientation={orientation}
        variant="unstyled"
      >
        <CustomTabList>
          <CustomTab>
            <FontAwesomeIcon icon="fa-solid fa-home" />
            <Space width="2x" />
            HOME
          </CustomTab>
          <CustomTab>
            <FontAwesomeIcon icon="fa-solid fa-boxes" />
            <Space width="2x" />
            INVENTORY
          </CustomTab>
          <CustomTab>
            <FontAwesomeIcon icon="fa-solid fa-cogs" />
            <Space width="2x" />
            SETTINGS
          </CustomTab>
        </CustomTabList>
        <TabPanels px="4x" py="3x">
          <TabPanel>
            <Text color={colorStyle.color.secondary} fontSize="4rem" lineHeight="1">
                1
            </Text>
          </TabPanel>
          <TabPanel>
            <Text color={colorStyle.color.secondary} fontSize="4rem" lineHeight="1">
              2
            </Text>
          </TabPanel>
          <TabPanel>
            <Text color={colorStyle.color.secondary} fontSize="4rem" lineHeight="1">
              3
            </Text>
          </TabPanel>
        </TabPanels>
      </Tabs>
    </>
  );
}

render(<Example />);
const CustomTabList = (props) => {
  const context = useTabs();
  const orientation = context.orientation;
  const [colorMode] = useColorMode();
  const [colorStyle] = useColorStyle({ colorMode });
  let styleProps = {
    backgroundColor: colorStyle.background.primary,
    position: 'relative',
  };

  if (orientation === 'horizontal') {
    styleProps = {
      ...styleProps,
      __after: {
        content: '""',
        borderBottom: 1,
        borderBottomColor: colorStyle.divider,
        position: 'absolute',
        bottom: 0,
        width: '100%',
      },
    };
  }

  if (orientation === 'vertical') {
    styleProps = {
      ...styleProps,
      alignItems: 'flex-start',
    };
  }

  return (
    <TabList
      {...styleProps}
      {...props}
    />
  );
};

const CustomTab = ({ children, ...rest }) => {
  const context = useTabs();
  const orientation = context.orientation;
  const [colorMode] = useColorMode();
  const [colorStyle] = useColorStyle({ colorMode });
  const { colors } = useTheme();
  const baseStyle = {
    backgroundColor: colorStyle.background.primary,
    color: colorStyle.color.secondary,
    px: '4x',
    py: '3x',
    position: 'relative',
    zIndex: 1,
    _disabled: {
      color: colorStyle.color.disabled,
      cursor: 'not-allowed',
    },
    _hover: {
      color: colorStyle.color.primary,
    },
  };

  if (orientation === 'horizontal') {
    const styleProps = {
      ...baseStyle,
      border: 1,
      borderColor: colorStyle.divider,
      _notLastOfType: {
        borderRight: 'none',
      },
      _selected: {
        borderBottomColor: 'transparent',
        background: colorStyle.background.primary,
        color: colorStyle.color.primary,
        '::before': {
          content: '""',
          position: 'absolute',
          top: -1,
          left: -1,
          right: 0,
          height: 3,
          backgroundColor: '#2cc185',
        },
      },
    };

    return (
      <Tab
        {...styleProps}
        {...rest}
      >
        {children}
      </Tab>
    );
  }

  if (orientation === 'vertical') {
    const styleProps = {
      ...baseStyle,
      borderBottom: 1,
      borderBottomColor: colorStyle.divider,
      textAlign: 'left',
      width: '100%',
      _selected: {
        borderLeftColor: colorStyle.background.primary,
        background: colorStyle.background.primary,
        color: colorStyle.color.primary,
        '::before': {
          content: '""',
          position: 'absolute',
          top: 0,
          bottom: 0,
          left: 0,
          width: 3,
          backgroundColor: '#2cc185',
        },
      },
    };

    return (
      <Tab
        {...styleProps}
        {...rest}
      >
        {({ getTabProps, index, isSelected }) => (
          <Box
            {...getTabProps()}
            pr="1x"
          >
            <Flex justifyContent="space-between">
              <Box>{children}</Box>
              <Icon icon="chevron-right" ml="4x" visibility={isSelected ? 'visible' : 'hidden'} />
            </Flex>
          </Box>
        )}
      </Tab>
    );
  }

  return null;
};

function Example() {
  const [orientation, setOrientation] = React.useState('horizontal');
  const [colorMode] = useColorMode();
  const [colorStyle] = useColorStyle({ colorMode });

  return (
    <>
      <Box mb="2x">
        <TextLabel>
          orientation
        </TextLabel>
      </Box>
      <ButtonGroup>
        <Button
          onClick={() => setOrientation('horizontal')}
          variant={orientation === 'horizontal' ? 'primary' : 'secondary'}
        >
          Horizontal
        </Button>
        <Button
          onClick={() => setOrientation('vertical')}
          variant={orientation === 'vertical' ? 'primary' : 'secondary'}
        >
          Vertical
        </Button>
      </ButtonGroup>
      <Divider my="4x" />
      <Tabs
        orientation={orientation}
        variant="unstyled"
      >
        <CustomTabList>
          <CustomTab>
            <FontAwesomeIcon icon="fa-solid fa-home" />
            <Space width="2x" />
            HOME
          </CustomTab>
          <CustomTab>
            <FontAwesomeIcon icon="fa-solid fa-boxes" />
            <Space width="2x" />
            INVENTORY
          </CustomTab>
          <CustomTab>
            <FontAwesomeIcon icon="fa-solid fa-cogs" />
            <Space width="2x" />
            SETTINGS
          </CustomTab>
        </CustomTabList>
        <TabPanels px="4x" py="3x">
          <TabPanel>
            <Text color={colorStyle.color.secondary} fontSize="4rem" lineHeight="1">
                1
            </Text>
          </TabPanel>
          <TabPanel>
            <Text color={colorStyle.color.secondary} fontSize="4rem" lineHeight="1">
              2
            </Text>
          </TabPanel>
          <TabPanel>
            <Text color={colorStyle.color.secondary} fontSize="4rem" lineHeight="1">
              3
            </Text>
          </TabPanel>
        </TabPanels>
      </Tabs>
    </>
  );
}

render(<Example />);