Tabs

Tabs organize content into multiple sections and allow users to navigate between them. It is built using React Aria Components and styled compile-time using StyleX, featuring smooth selection sliding indicator animations.

Preview

Import

import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@moul-dev/ui';

Variants

The Tabs component supports three visual variants through the variant prop: primary (default brand indicator), secondary (foreground indicator), and tertiary (sliding pill background bubble).

Primary (Default)

The primary variant uses the brand accent color for the selection indicator underline.

<Tabs variant="primary">
  <TabList aria-label="Primary Tabs">
    <Tab id="1">Tab 1</Tab>
    <Tab id="2">Tab 2</Tab>
  </TabList>
  <TabPanels>
    <TabPanel id="1">Content 1</TabPanel>
    <TabPanel id="2">Content 2</TabPanel>
  </TabPanels>
</Tabs>

Secondary

The secondary variant uses the default foreground text color for the selection indicator underline.

Tertiary (Sliding Pill)

The tertiary variant renders a premium sliding rounded pill background under the selected tab and removes borders from the tab list.

Vertical Orientation

Tabs can be stacked vertically using the orientation="vertical" prop. The selection indicator animates along the vertical axis, and the tab panels are laid out inline to the right.

Props

Tabs Props

Default className: react-aria-Tabs