Tabs

Tabs organize content into multiple sections and allow users to navigate between them.

Usage

1import { Tabs } from '@lenso/ui';

1"use client";2
3import { Tabs } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5
6const styles = stylex.create({ root: { width: "100%", maxWidth: 448 }, panel: { paddingTop: 16 } });7export function Basic() {8  return (9    <Tabs defaultValue="overview" xstyle={styles.root}>10      <Tabs.ListContainer>11        <Tabs.List activateOnFocus aria-label="Options">12          <Tabs.Tab value="overview">Overview</Tabs.Tab>13          <Tabs.Tab value="analytics">Analytics</Tabs.Tab>14          <Tabs.Tab value="reports">Reports</Tabs.Tab>15          <Tabs.Indicator />16        </Tabs.List>17      </Tabs.ListContainer>18      <Tabs.Panel xstyle={styles.panel} value="overview">19        <p>View your project overview and recent activity.</p>20      </Tabs.Panel>21      <Tabs.Panel xstyle={styles.panel} value="analytics">22        <p>Track your metrics and analyze performance data.</p>23      </Tabs.Panel>24      <Tabs.Panel xstyle={styles.panel} value="reports">25        <p>Generate and download detailed reports.</p>26      </Tabs.Panel>27    </Tabs>28  );29}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Anatomy

1import { Tabs } from '@lenso/ui';2
3export default () => (4  <Tabs>5    <Tabs.ListContainer>6      <Tabs.List aria-label="Options">7        <Tabs.Tab>8          <Tabs.Separator /> {/* Optional */}9          <Tabs.Indicator />10        </Tabs.Tab>11      </Tabs.List>12    </Tabs.ListContainer>13    <Tabs.Panel/>14  </Tabs>15)

Examples

Vertical

1"use client";2export { Vertical } from "./source";

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Overflow

When the tab list exceeds the available space, Tabs.ListContainer automatically renders scroll chevrons and fading edges so users can navigate the hidden tabs. This works the same way for both horizontal and vertical orientations.

1"use client";2export { Overflow } from "./source";

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Disabled Tab

1"use client";2export { Disabled } from "./source";

Local adaptation source above. Derived from HeroUI v3.2.6 source.

With Separator

Add <Tabs.Separator /> inside each <Tabs.Tab> (except the first) to display separator lines between tabs.

1"use client";2export { WithSeparator } from "./source";

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Secondary Variant

1"use client";2export { Secondary } from "./source";

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Secondary Variant Vertical

1"use client";2export { SecondaryVertical } from "./source";

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Alignment

Tab content is centered by default. Use align to align it to the start or end instead, which is especially useful for vertical, sidebar-style navigation. Individual tabs can still be overridden with className on Tabs.Tab.

1"use client";2export { VerticalAlignment } from "./source";

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Render Function

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac2), Apache-2.0. Native anchors supply real navigation.3import { Tabs } from "@lenso/ui";4import Link from "next/link";5import { styles } from "./source.stylex";6export function RenderFunction() {7  return (8    <Tabs9      defaultValue="getting-started"10      xstyle={styles.root}11      render={(props) => <div {...props} data-custom="foo" />}12    >13      <Tabs.ListContainer>14        <Tabs.List aria-label="Options">15          <Tabs.Tab16            value="getting-started"17            nativeButton={false}18            render={<Link href="/docs/react/getting-started" />}19          >20            Getting Started21          </Tabs.Tab>22          <Tabs.Tab23            value="components"24            nativeButton={false}25            render={<Link href="/docs/react/components" />}26          >27            Components28          </Tabs.Tab>29          <Tabs.Tab30            value="releases"31            nativeButton={false}32            render={<Link href="/docs/react/releases" />}33          >34            Releases35          </Tabs.Tab>36          <Tabs.Indicator />37        </Tabs.List>38      </Tabs.ListContainer>39      <Tabs.Panel value="overview" xstyle={styles.panel}>40        <p>View your project overview and recent activity.</p>41      </Tabs.Panel>42      <Tabs.Panel value="analytics" xstyle={styles.panel}>43        <p>Track your metrics and analyze performance data.</p>44      </Tabs.Panel>45      <Tabs.Panel value="reports" xstyle={styles.panel}>46        <p>Generate and download detailed reports.</p>47      </Tabs.Panel>48    </Tabs>49  );50}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Customization

Tailwind CSS

1"use client";2export { CustomStyles } from "./source";

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Global CSS

To customize the Tabs component classes, you can use the @layer components directive. Learn more.

1@layer components {2  .tabs__list {3    @apply rounded-xl border border-border bg-surface p-1;4  }5
6  .tabs__tab {7    @apply rounded-lg font-medium;8  }9
10  .tabs__indicator {11    @apply rounded-lg bg-foreground shadow-sm;12  }13
14  .tabs--secondary > .tabs__list-container > .tabs__list {15    @apply border-b border-border bg-transparent p-0;16  }17
18  .tabs--secondary > .tabs__list-container .tabs__indicator {19    @apply rounded-none bg-accent;20  }21}

Styling Reference

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The Tabs component uses these CSS classes (View source styles):

Base Classes [!toc]

.tabs - Base tabs container
.tabs__list-container - Tab list container wrapper
.tabs__list-container__scroller - Scrollable wrapper around the tab list (handles overflow and fading edges)
.tabs__list-container__scroll-prev - Scroll chevron button for the previous (left / up) direction
.tabs__list-container__scroll-next - Scroll chevron button for the next (right / down) direction
.tabs__list - Tab list container
.tabs__tab - Individual tab button
.tabs__separator - Separator between tabs
.tabs__panel - Tab panel content
.tabs__indicator - Tab indicator

Orientation Attributes [!toc]

.tabs[data-orientation="horizontal"] - Horizontal tab layout (default)
.tabs[data-orientation="vertical"] - Vertical tab layout

Variant Classes [!toc]

.tabs--secondary - Secondary variant with underline indicator

Alignment Classes [!toc]

.tabs--align-start - Aligns tab content to the start
.tabs--align-end - Aligns tab content to the end

Interactive States

The component supports both CSS pseudo-classes and data attributes:

Selected: [aria-selected="true"]
Hover: :hover or [data-hovered="true"]
Focus: :focus-visible or [data-focus-visible="true"]
Disabled: [aria-disabled="true"]

API Reference

Tabs

Prop	Type	Default	Description
`variant`	`"primary" \| "secondary"`	`"primary"`	Visual style variant. Primary uses a filled indicator, secondary uses an underline indicator
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Tab layout orientation
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment of the content inside each tab
`selectedKey`	`string`	-	Controlled selected tab key
`defaultSelectedKey`	`string`	-	Default selected tab key
`onSelectionChange`	`(key: Key) => void`	-	Selection change handler
`className`	`string`	-	Additional CSS classes
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, TabsRenderProps>`	-	Overrides the default DOM element with a custom render function.

Tabs.List

Prop	Type	Default	Description
`aria-label`	`string`	-	Accessibility label for tab list
`className`	`string`	-	Additional CSS classes
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, TabListRenderProps>`	-	Overrides the default DOM element with a custom render function.

Tabs.Tab

Prop	Type	Default	Description
`id`	`string`	-	Unique tab identifier
`isDisabled`	`boolean`	`false`	Whether tab is disabled
`className`	`string`	-	Additional CSS classes
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, TabRenderProps>`	-	Overrides the default DOM element with a custom render function.

Tabs.Separator

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Tabs.Panel

Prop	Type	Default	Description
`id`	`string`	-	Panel identifier matching tab id
`className`	`string`	-	Additional CSS classes
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, TabPanelRenderProps>`	-	Overrides the default DOM element with a custom render function.

See upstream Tabs showcases. Product showcases are not part of the local component runtime.

Breadcrumbs

Navigation breadcrumbs showing the current page's location within a hierarchy

Tabs

Usage

Anatomy

Examples

Vertical

Overflow

Disabled Tab

With Separator

Secondary Variant

Secondary Variant Vertical

Alignment

Render Function

Customization

Tailwind CSS

Global CSS

Styling Reference

CSS Classes

Base Classes [!toc]

Orientation Attributes [!toc]

Variant Classes [!toc]

Alignment Classes [!toc]

Interactive States

API Reference

Tabs

Tabs.List

Tabs.Tab

Tabs.Separator

Tabs.Panel

Related Showcases

Related Components