Component reference
Tabs
Related views with matching triggers and panels.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Width adapts to the available space
"use client";
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
type PimoluTabsVariant
} from "@pimolu/react";
export function TabsExample({ variant = "line" }: {
variant?: PimoluTabsVariant;
}) {
return (
<Tabs defaultValue="overview" variant={variant}>
<TabsList aria-label="Project details">
<TabsTrigger value="overview">Overview</TabsTrigger>
<TabsTrigger
value="activity"
>
Activity
</TabsTrigger>
<TabsTrigger
value="archive"
disabled
>
Archive
</TabsTrigger>
</TabsList>
<TabsContent value="overview">
<p className="py-5">One workspace for your next idea.</p>
</TabsContent>
<TabsContent value="archive">
<p className="py-5">
Archived projects are unavailable in this example.
</p>
</TabsContent>
<TabsContent value="activity">
<p className="py-5">
The project was created. Your next step is yours to choose.
</p>
</TabsContent>
</Tabs>
);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Anatomy
Tabs, TabsList, TabsTrigger and TabsContent; the disabled Settings trigger is skipped by click and keyboard navigation.
Variants
Enumerated from tabsVariantMap: line, solid and soft here; the segmented variant has its own section below.
Segmented
A neutral pill track with an elevated active segment. Dividers separate inactive segments; the vertical form becomes a menu; the scrollable form adds previous/next buttons when the tabs overflow.
Usage
Each trigger and panel share a value. Use defaultValue for an internal selection, or value/onValueChange to control it.
Choose line or segmented variants from tabsVariantMap. manual activation separates arrow focus from selection when switching content is expensive.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluTabsProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactNode | — | TabsList and the TabsContent panels. |
defaultValue | string | undefined | — | Initial selection when uncontrolled. |
value | string | undefined | — | Controlled selection. |
onValueChange | ((value: string) => void) | undefined | — | Called whenever the selected value changes. |
orientation | PimoluTabsOrientation | undefined | "horizontal" | Direction of the keyboard arrows and of the layout. Defaults to "horizontal". |
activationMode | PimoluTabsActivationMode | undefined | "automatic" | "automatic" selects a tab as soon as an arrow reaches it; "manual" only moves focus and waits for Enter or Space. Defaults to "automatic". |
variant | "solid" | "soft" | "line" | "segmented" | undefined | "line" | Visual treatment. Defaults to "line". |
size | "sm" | "md" | "lg" | undefined | "md" | Trigger height and font size. Defaults to "md". |
className | string | undefined | — | Class applied to the root. |
childrenRequiredReactNodeNo default extracted.
TabsList and the TabsContent panels.
defaultValuestring | undefinedNo default extracted.
Initial selection when uncontrolled.
valuestring | undefinedNo default extracted.
Controlled selection.
onValueChange((value: string) => void) | undefinedNo default extracted.
Called whenever the selected value changes.
orientationPimoluTabsOrientation | undefinedDefault: "horizontal"
Direction of the keyboard arrows and of the layout. Defaults to "horizontal".
activationModePimoluTabsActivationMode | undefinedDefault: "automatic"
"automatic" selects a tab as soon as an arrow reaches it; "manual" only moves focus and waits for Enter or Space. Defaults to "automatic".
variant"solid" | "soft" | "line" | "segmented" | undefinedDefault: "line"
Visual treatment. Defaults to "line".
size"sm" | "md" | "lg" | undefinedDefault: "md"
Trigger height and font size. Defaults to "md".
classNamestring | undefinedNo default extracted.
Class applied to the root.
PimoluTabsListProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
aria-label | string | undefined | — | Accessible name of the tablist. |
aria-labelledby | string | undefined | — | Id of the element that names the tablist. |
dividers | boolean | undefined | false | Add separators between the segments of the `segmented` variant. Defaults to false. |
scrollable | boolean | undefined | false | Keep a horizontal list on one line and scroll it, with previous/next buttons when it overflows. Defaults to false. |
scrollPreviousLabel | string | undefined | "Previous tabs" | Accessible name of the previous-tabs button. |
scrollNextLabel | string | undefined | "Next tabs" | Accessible name of the next-tabs button. |
className | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
aria-labelstring | undefinedNo default extracted.
Accessible name of the tablist.
aria-labelledbystring | undefinedNo default extracted.
Id of the element that names the tablist.
dividersboolean | undefinedDefault: false
Add separators between the segments of the `segmented` variant. Defaults to false.
scrollableboolean | undefinedDefault: false
Keep a horizontal list on one line and scroll it, with previous/next buttons when it overflows. Defaults to false.
scrollPreviousLabelstring | undefinedDefault: "Previous tabs"
Accessible name of the previous-tabs button.
scrollNextLabelstring | undefinedDefault: "Next tabs"
Accessible name of the next-tabs button.
classNamestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
PimoluTabsTriggerProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
valueRequired | string | — | Value shared with the matching TabsContent. |
disabled | boolean | undefined | false | Skip the tab in click and arrow navigation. |
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
className | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
valueRequiredstringNo default extracted.
Value shared with the matching TabsContent.
disabledboolean | undefinedDefault: false
Skip the tab in click and arrow navigation.
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
classNamestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
PimoluTabsContentProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
valueRequired | string | — | Value shared with the matching TabsTrigger. |
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
className | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
valueRequiredstringNo default extracted.
Value shared with the matching TabsTrigger.
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
classNamestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
Accessibility
- Name TabsList with aria-label or aria-labelledby.
- Horizontal arrows move across horizontal tabs; check vertical navigation when orientation is vertical. Disabled tabs are skipped.