Tabs

A React component that helps you build accessible tabs, by providing keyboard interactions and ARIA attributes described in the WAI-ARIA Tab Panel Design Pattern.

Lorem ipsum dolor sit amet consectetur adipiscing elit. Sit amet consectetur adipiscing elit quisque faucibus ex. Adipiscing elit quisque faucibus ex sapien vitae pellentesque.

Figma

React

Bootstrap

Native

React

Hover Design System exports the following components for rendering Tabs:

import { Tabs, TabList, TabPanels, Tab, TabPanel } from '@hover/blueprint';

Tabs: Provides context and state for all components
TabList: Wrapper for the Tab components
Tab: element that serves as a label for one of the tab panels and can be activated to display that panel.
TabPanels: Wrapper for the TabPanel components
TabPanel: element that contains the content associated with a tab

Usage

live

<Tabs>
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
    <Tab>Three</Tab>
    <Tab>Four</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <Body>
        <LoremIpsum generate={{ p: 1, sentences: 8 }} />
      </Body>
    </TabPanel>
    <TabPanel>
      <Body>
        <LoremIpsum generate={{ p: 1, sentences: 5 }} />
      </Body>
    </TabPanel>
    <TabPanel>
      <Body>
        <LoremIpsum generate={{ p: 1, sentences: 6 }} />
      </Body>
    </TabPanel>
    <TabPanel>
      <Body>
        <LoremIpsum generate={{ p: 1, sentences: 9 }} />
      </Body>
    </TabPanel>
  </TabPanels>
</Tabs>

Size

The default size for Tabs is small, however it also supports medium and large to render larger heading styles for each tab.

live

<Tabs size="large" margin="200">
  <TabList>
    <Tab>Projects</Tab>
    <Tab>
      Design Ideas
      <Icon icon={iconInspiration} size="medium" isInline marginLeft="100" />
    </Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <SimpleGrid role="list" columns={4} gap="500">
        {Array.from({ length: 16 }, (_, i) => (
          <Center
            background="neutral.100"
            borderRadius="300"
            role="listitem"
            sx={{ aspectRatio: '4/3' }}
            width="100%"
          />
        ))}
      </SimpleGrid>
    </TabPanel>
    <TabPanel>
      <SimpleGrid role="list" columns={3} gap="500">
        {Array.from({ length: 9 }, (_, i) => (
          <Center
            background="neutral.100"
            borderRadius="300"
            role="listitem"
            sx={{ aspectRatio: '4/3' }}
            width="100%"
          />
        ))}
      </SimpleGrid>
    </TabPanel>
  </TabPanels>
</Tabs>