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.

React

Hover Design System exports the following components for rendering Tabs:

import { Tabs, TabList, TabPanels, Tab, TabPanel } from '@hoverinc/design-system-react-web';

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>

Table

Textarea