Tabs

The <Tabs /> component renders accessibility-focused tab controls.

Built on top of the Reach UI Tabs.

import {
  Box,
  Flex,
  Tabs,
  TabList,
  Tab,
  TabPanels,
  TabPanel,
  useTabContext,
} from 'minerva-ui';

Tabs with underline


My Account!
Favorites!
Orders!
Billing!
<Tabs>
  <TabList mb="20px" borderBottom="2px solid #d2d6dc">
    <Tab>My Account</Tab>
    <Tab>Favorites</Tab>
    <Tab>Orders</Tab>
    <Tab>Billing</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>My Account!</p>
    </TabPanel>
    <TabPanel>
      <p>Favorites!</p>
    </TabPanel>
    <TabPanel>
      <p>Orders!</p>
    </TabPanel>
    <TabPanel>
      <p>Billing!</p>
    </TabPanel>
  </TabPanels>
</Tabs>
<Tabs>
  <TabList mb="20px" borderBottom="2px solid #d2d6dc">
    <Tab>My Account</Tab>
    <Tab>Favorites</Tab>
    <Tab>Orders</Tab>
    <Tab>Billing</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>My Account!</p>
    </TabPanel>
    <TabPanel>
      <p>Favorites!</p>
    </TabPanel>
    <TabPanel>
      <p>Orders!</p>
    </TabPanel>
    <TabPanel>
      <p>Billing!</p>
    </TabPanel>
  </TabPanels>
</Tabs>

Vertical Tabs


My Account!
Favorites!
Orders!
Billing!
() => {
  const tabStyles = {
    width: '100%',
    marginBottom: 2,
    marginRight: 2,
    borderRadius: 5,
    justifyContent: 'center',
    _selected: {
      color: 'rgb(85, 26, 139)',
      backgroundColor: 'cool-gray.200',
      borderBottom: 0,
    },
  };
  return (
    <Tabs orientation="vertical">
      <TabList mb="20px">
        <Tab {...tabStyles}>My Account</Tab>
        <Tab {...tabStyles}>Favorites</Tab>
        <Tab {...tabStyles}>Orders</Tab>
        <Tab {...tabStyles}>Billing</Tab>
      </TabList>
      <TabPanels p={2}>
        <TabPanel>
          <p>My Account!</p>
        </TabPanel>
        <TabPanel>
          <p>Favorites!</p>
        </TabPanel>
        <TabPanel>
          <p>Orders!</p>
        </TabPanel>
        <TabPanel>
          <p>Billing!</p>
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
};
() => {
  const tabStyles = {
    width: '100%',
    marginBottom: 2,
    marginRight: 2,
    borderRadius: 5,
    justifyContent: 'center',
    _selected: {
      color: 'rgb(85, 26, 139)',
      backgroundColor: 'cool-gray.200',
      borderBottom: 0,
    },
  };
  return (
    <Tabs orientation="vertical">
      <TabList mb="20px">
        <Tab {...tabStyles}>My Account</Tab>
        <Tab {...tabStyles}>Favorites</Tab>
        <Tab {...tabStyles}>Orders</Tab>
        <Tab {...tabStyles}>Billing</Tab>
      </TabList>
      <TabPanels p={2}>
        <TabPanel>
          <p>My Account!</p>
        </TabPanel>
        <TabPanel>
          <p>Favorites!</p>
        </TabPanel>
        <TabPanel>
          <p>Orders!</p>
        </TabPanel>
        <TabPanel>
          <p>Billing!</p>
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
};

Tabs with custom underline


My Account!
Favorites!
Orders!
Billing!
() => {
  const selectedStyles = {
    borderBottom: '2px solid rgb(85, 26, 139)',
    color: 'rgb(85, 26, 139)',
  };

  return (
    <Tabs>
      <TabList mb="20px" borderBottom="2px solid #d2d6dc">
        <Tab _selected={{ ...selectedStyles }}>My Account</Tab>
        <Tab _selected={{ ...selectedStyles }}>Favorites</Tab>
        <Tab _selected={{ ...selectedStyles }}>Orders</Tab>
        <Tab _selected={{ ...selectedStyles }}>Billing</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>
          <p>My Account!</p>
        </TabPanel>
        <TabPanel>
          <p>Favorites!</p>
        </TabPanel>
        <TabPanel>
          <p>Orders!</p>
        </TabPanel>
        <TabPanel>
          <p>Billing!</p>
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
};
() => {
  const selectedStyles = {
    borderBottom: '2px solid rgb(85, 26, 139)',
    color: 'rgb(85, 26, 139)',
  };
  return (
    <Tabs>
      <TabList mb="20px" borderBottom="2px solid #d2d6dc">
        <Tab _selected={{ ...selectedStyles }}>My Account</Tab>
        <Tab _selected={{ ...selectedStyles }}>Favorites</Tab>
        <Tab _selected={{ ...selectedStyles }}>Orders</Tab>
        <Tab _selected={{ ...selectedStyles }}>Billing</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>
          <p>My Account!</p>
        </TabPanel>
        <TabPanel>
          <p>Favorites!</p>
        </TabPanel>
        <TabPanel>
          <p>Orders!</p>
        </TabPanel>
        <TabPanel>
          <p>Billing!</p>
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
};

Tabs with underline and icons


My Account!
Favorites!
Orders!
Billing!
<Tabs>
  <TabList mb="20px">
    <Tab>
      <Icon name="user" size="14px" mr="15px" color="currentColor" />
      My Account
    </Tab>
    <Tab>
      <Icon name="heart" size="14px" mr="15px" color="currentColor" />
      Favorites
    </Tab>
    <Tab>
      <Icon name="shopping-bag" size="14px" mr="15px" color="currentColor" />
      Orders
    </Tab>
    <Tab>
      <Icon name="credit-card" size="14px" mr="15px" color="currentColor" />
      Billing
    </Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>My Account!</p>
    </TabPanel>
    <TabPanel>
      <p>Favorites!</p>
    </TabPanel>
    <TabPanel>
      <p>Orders!</p>
    </TabPanel>
    <TabPanel>
      <p>Billing!</p>
    </TabPanel>
  </TabPanels>
</Tabs>
<Tabs>
  <TabList mb="20px">
    <Tab>
      <Icon name="user" size="14px" mr="15px" color="currentColor" />
      My Account
    </Tab>
    <Tab>
      <Icon name="heart" size="14px" mr="15px" color="currentColor" />
      Favorites
    </Tab>
    <Tab>
      <Icon name="shopping-bag" size="14px" mr="15px" color="currentColor" />
      Orders
    </Tab>
    <Tab>
      <Icon name="credit-card" size="14px" mr="15px" color="currentColor" />
      Billing
    </Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>My Account!</p>
    </TabPanel>
    <TabPanel>
      <p>Favorites!</p>
    </TabPanel>
    <TabPanel>
      <p>Orders!</p>
    </TabPanel>
    <TabPanel>
      <p>Billing!</p>
    </TabPanel>
  </TabPanels>
</Tabs>

Tabs in pills


My Account!
Favorites!
Orders!
Billing!
() => {
  const tabStyles = {
    borderRadius: '5px',
    border: 0,
    marginRight: 2,
  };
  const selectedStyles = {
    bg: '#e0e0e0',
    border: 0,
  };
  return (
    <Tabs>
      <TabList mb="20px">
        <Tab {...tabStyles} _selected={{ ...selectedStyles }} ml={2}>
          My Account
        </Tab>
        <Tab {...tabStyles} _selected={{ ...selectedStyles }}>
          Favorites
        </Tab>
        <Tab {...tabStyles} _selected={{ ...selectedStyles }}>
          Orders
        </Tab>
        <Tab {...tabStyles} _selected={{ ...selectedStyles }}>
          Billing
        </Tab>
      </TabList>
      <TabPanels>
        <TabPanel>
          <p>My Account!</p>
        </TabPanel>
        <TabPanel>
          <p>Favorites!</p>
        </TabPanel>
        <TabPanel>
          <p>Orders!</p>
        </TabPanel>
        <TabPanel>
          <p>Billing!</p>
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
};
() => {
  const tabStyles = {
    borderRadius: '5px',
    border: 0,
    marginRight: 2,
  };
  const selectedStyles = {
    bg: '#e0e0e0',
    border: 0,
  };
  return (
    <Tabs>
      <TabList mb="20px">
        <Tab {...tabStyles} _selected={{ ...selectedStyles }} ml={2}>
          My Account
        </Tab>
        <Tab {...tabStyles} _selected={{ ...selectedStyles }}>
          Favorites
        </Tab>
        <Tab {...tabStyles} _selected={{ ...selectedStyles }}>
          Orders
        </Tab>
        <Tab {...tabStyles} _selected={{ ...selectedStyles }}>
          Billing
        </Tab>
      </TabList>
      <TabPanels>
        <TabPanel>
          <p>My Account!</p>
        </TabPanel>
        <TabPanel>
          <p>Favorites!</p>
        </TabPanel>
        <TabPanel>
          <p>Orders!</p>
        </TabPanel>
        <TabPanel>
          <p>Billing!</p>
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
};

Tabs in pills on gray


My Account!
Favorites!
Orders!
Billing!
() => {
  const tabStyles = {
    borderRadius: '5px',
    border: 0,
    marginRight: 2,
  };
  const selectedStyles = {
    bg: '#e0e0e0',
    border: 0,
  };
  return (
    <Tabs>
      <TabList mb="20px" height="80px" bg="#f5f6fa">
        <Tab {...tabStyles} _selected={{ ...selectedStyles }} ml={2}>
          My Account
        </Tab>
        <Tab {...tabStyles} _selected={{ ...selectedStyles }}>
          Favorites
        </Tab>
        <Tab {...tabStyles} _selected={{ ...selectedStyles }}>
          Orders
        </Tab>
        <Tab {...tabStyles} _selected={{ ...selectedStyles }}>
          Billing
        </Tab>
      </TabList>
      <TabPanels>
        <TabPanel>
          <p>My Account!</p>
        </TabPanel>
        <TabPanel>
          <p>Favorites!</p>
        </TabPanel>
        <TabPanel>
          <p>Orders!</p>
        </TabPanel>
        <TabPanel>
          <p>Billing!</p>
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
};
() => {
  const tabStyles = {
    borderRadius: '5px',
    border: 0,
    marginRight: 2,
  };
  const selectedStyles = {
    bg: '#e0e0e0',
    border: 0,
  };
  return (
    <Tabs>
      <TabList mb="20px" height="80px" bg="#f5f6fa">
        <Tab {...tabStyles} _selected={{ ...selectedStyles }} ml={2}>
          My Account
        </Tab>
        <Tab {...tabStyles} _selected={{ ...selectedStyles }}>
          Favorites
        </Tab>
        <Tab {...tabStyles} _selected={{ ...selectedStyles }}>
          Orders
        </Tab>
        <Tab {...tabStyles} _selected={{ ...selectedStyles }}>
          Billing
        </Tab>
      </TabList>
      <TabPanels>
        <TabPanel>
          <p>My Account!</p>
        </TabPanel>
        <TabPanel>
          <p>Favorites!</p>
        </TabPanel>
        <TabPanel>
          <p>Orders!</p>
        </TabPanel>
        <TabPanel>
          <p>Billing!</p>
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
};

Tabs in pills with brand color


My Account!
Favorites!
Orders!
Billing!
() => {
  const tabStyles = {
    borderRadius: '5px',
    border: 0,
    marginRight: 2,
  };
  const selectedStyles = {
    bg: 'rgb(88,80,236, 0.1)',
    border: 0,
    borderRadius: '5px',
    color: '#5850EC',
  };
  return (
    <Tabs>
      <TabList mb="20px" height="80px">
        <Tab {...tabStyles} _selected={{ ...selectedStyles }}>
          My Account
        </Tab>
        <Tab {...tabStyles} _selected={{ ...selectedStyles }}>
          Favorites
        </Tab>
        <Tab {...tabStyles} _selected={{ ...selectedStyles }}>
          Orders
        </Tab>
        <Tab {...tabStyles} _selected={{ ...selectedStyles }}>
          Billing
        </Tab>
      </TabList>
      <TabPanels>
        <TabPanel>
          <p>My Account!</p>
        </TabPanel>
        <TabPanel>
          <p>Favorites!</p>
        </TabPanel>
        <TabPanel>
          <p>Orders!</p>
        </TabPanel>
        <TabPanel>
          <p>Billing!</p>
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
};
() => {
  const tabStyles = {
    borderRadius: '5px',
    border: 0,
    marginRight: 2,
  };
  const selectedStyles = {
    bg: 'rgb(88,80,236, 0.1)',
    border: 0,
    borderRadius: '5px',
    color: '#5850EC',
  };
  return (
    <Tabs>
      <TabList mb="20px" height="80px">
        <Tab {...tabStyles} _selected={{ ...selectedStyles }}>
          My Account
        </Tab>
        <Tab {...tabStyles} _selected={{ ...selectedStyles }}>
          Favorites
        </Tab>
        <Tab {...tabStyles} _selected={{ ...selectedStyles }}>
          Orders
        </Tab>
        <Tab {...tabStyles} _selected={{ ...selectedStyles }}>
          Billing
        </Tab>
      </TabList>
      <TabPanels>
        <TabPanel>
          <p>My Account!</p>
        </TabPanel>
        <TabPanel>
          <p>Favorites!</p>
        </TabPanel>
        <TabPanel>
          <p>Orders!</p>
        </TabPanel>
        <TabPanel>
          <p>Billing!</p>
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
};

Props

Props are all extended from Reach UI's <Tabs /> component

`<Tabs />`

Name	Type	Is Required	Default	Description
`defaultIndex`	number	optional	none	Initial active tab index
`index`	number	optional	none	Active tab index
`onChange`	function	optional	none	Callback that's triggered whenever a new tab is selected
`keyboardActivation`	`auto` or `manual`	optional	`auto`	When `auto`, tabs are activated when focused, when `manual` you must press `Spacebar` or `Enter` to activate tabs
`orientation`	`horizontal` or `vertical`	optional	`horizontal`	Change direction of tabs

`<TabsList />`

Name	Type	Is Required	Default	Description
`children`	`node`	optional	none

`<Tab />`

Name	Type	Is Required	Default	Description
`children`	`node`	optional	none
`disabled`	`boolean`	optional	false	Disable clicking or focusing tab

`<TabPanels />`

Name	Type	Is Required	Default	Description
`children`	`node`	optional	none

`<TabPanel />`

Name	Type	Is Required	Default	Description
`children`	`node`	optional	none