Design System

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>


Copyright © 2025 Hover Inc. All Rights Reserved.