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

Preview

My Account!

Favorites!

Orders!

Billing!

Source

<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

Preview

My Account!

Favorites!

Orders!

Billing!

Source

() => { 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

Preview

My Account!

Favorites!

Orders!

Billing!

Source

() => { 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

Preview

My Account!

Favorites!

Orders!

Billing!

Source

<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

Preview

My Account!

Favorites!

Orders!

Billing!

Source

() => { 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

Preview

My Account!

Favorites!

Orders!

Billing!

Source

() => { 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

Preview

My Account!

Favorites!

Orders!

Billing!

Source

() => { const tabStyles = { borderRadius: '5px', border: 0, marginRight: 2, }; const selectedStyles = { bg: 'rgb(88,80,236, 0.1)', border: 'none', 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: 'none',
    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