Tabs

An unstyled tab component with keyboard navigation and scrollable overflow support.

Build fully custom tabbed interfaces with complete control over layout and styling.

Account Info

Update your personal information such as name, email address, and profile picture.

basic-demo

Pre-styled Versions

Choose a pre-styled library to use Tabs with ready-made designs.

Styled

Theme-based styling with CSS variables

Tailwind

Utility-first styling with Tailwind CSS

For hook-based usage without components, see the Headless API.

Features#

Compound component API with sub-components: Root, List, Content, Tab, Indicator, Panels, Panel, Prev, Next
Automatic keyboard focus cycling across tabs with arrow keys, Home, and End
Active bar indicator with CSS custom properties for animated positioning
Built-in scroll navigation with Prev/Next buttons for overflow tab lists
Configurable scroll strategy: nearest, center, disabled, or custom function

Usage#

import { Tabs } from 'primereact/tabs';

<Tabs.Root defaultValue="tab1">
    <Tabs.List>
        <Tabs.Prev></Tabs.Prev>
        <Tabs.Content>
            <Tabs.Tab value="tab1"></Tabs.Tab>
            <Tabs.Indicator />
        </Tabs.Content>
        <Tabs.Next></Tabs.Next>
    </Tabs.List>
    <Tabs.Panels>
        <Tabs.Panel value="tab1"></Tabs.Panel>
    </Tabs.Panels>
</Tabs.Root>

Behavior#

Polymorphic Rendering#

Use as on any sub-component to change the rendered HTML element.

<Tabs.Root as="section">
    <Tabs.List as="nav">...</Tabs.List>
</Tabs.Root>

Render Function Children#

Sub-components accept a render function as children, providing access to the component instance.

<Tabs.Tab value="tab1">{(instance) => <span className={instance.active ? 'active' : ''}>{instance.props.value}</span>}</Tabs.Tab>

Pass Through#

Some parts may not be visible in the preview depending on the component's current state.

Account Info

Update your personal information such as name, email address, and profile picture.

/* Select a part to see its CSS selector for custom styling */

API#

TabsRoot#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TabsRootInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TabsRootInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TabsRootInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TabsRootPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TabsRootInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`value`	`string` \| `number`	`undefined`
Value of the active tab. Use for controlled mode.
`defaultValue`	`string` \| `number`	`undefined`
Default value of the active tab. Use for uncontrolled mode.
`selectOnFocus`	`boolean`	`false`
When enabled, the focused tab is activated.
`scrollStrategy`	`false` \| `"center"` \| `"nearest"` \| `((content: HTMLElement, tab: HTMLElement) => void)`	`'nearest'`
Defines how the active tab is scrolled into view when it changes. - `'nearest'` : scrolls only if the tab is clipped or too close to an edge, with padding. - `'center'` : always centers the active tab in the viewport. - `false` : disables auto-scrolling. - `function` : a custom scroll function receiving the content element and active tab element.
`tabIndex`	`number`	`0`
The tabIndex of the active tab.
`onValueChange`	`(event: useTabsChangeEvent) => void`	—
Callback fired when the tabs's value changes.
`lazy`	`boolean`	`false`
When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of Tabs component.

label	type	description
root	TabsRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.
list	TabsRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the list's DOM element.
content	TabsRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the content's DOM element.
tab	TabsRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the tab's DOM element.
indicator	TabsRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the indicator's DOM element.
panels	TabsRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the panels' DOM element.
panel	TabsRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the panel's DOM element.
prev	TabsRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the prev button's DOM element.
next	TabsRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the next button's DOM element.

TabsList#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TabsListInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TabsListInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TabsListInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TabsListPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TabsListInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of TabsList component.

label	type	description
root	TabsListPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

TabsContent#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TabsContentInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TabsContentInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TabsContentInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TabsContentPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TabsContentInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of TabsContent component.

label	type	description
root	TabsContentPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

TabsTab#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TabsTabInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TabsTabInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TabsTabInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TabsTabPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TabsTabInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`value`	`string` \| `number`	—
Value of the tab.
`disabled`	`boolean`	`false`
Whether the tab is disabled.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-active`	Present when active
`data-disabled`	Present when disabled

Defines passthrough(pt) options of TabsTab component.

label	type	description
root	TabsTabPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

TabsIndicator#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TabsIndicatorInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TabsIndicatorInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TabsIndicatorInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TabsIndicatorPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TabsIndicatorInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`value`	`string` \| `number`	—
Value of the tabsindicator.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

CSS Custom Properties

The indicator element exposes CSS custom properties for animated positioning relative to the active tab.

CSS Variable	Description
`--active-bar-width`	Width of the active tab in pixels
`--active-bar-height`	Height of the active tab in pixels
`--active-bar-left`	Left offset of the active tab
`--active-bar-top`	Top offset of the active tab

Defines passthrough(pt) options of TabsIndicator component.

label	type	description
root	TabsIndicatorPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

TabsPanels#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TabsPanelsInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TabsPanelsInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TabsPanelsInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TabsPanelsPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TabsPanelsInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of TabsPanels component.

label	type	description
root	TabsPanelsPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

TabsPanel#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TabsPanelInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TabsPanelInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TabsPanelInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TabsPanelPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TabsPanelInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`value`	`string` \| `number`	—
Value of the tabpanel.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-active`	Present when active

Defines passthrough(pt) options of TabsPanel component.

label	type	description
root	TabsPanelPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

TabsPrev#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TabsPrevInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TabsPrevInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TabsPrevInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TabsPrevPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TabsPrevInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`ariaLabel`	`string`	—
Aria label for the previous button.
`lazy`	`boolean`	`false`
When enabled, the button is unmounted from the DOM when it is not needed.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-disabled`	Present when disabled

Defines passthrough(pt) options of TabsPrev component.

label	type	description
root	TabsPrevPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

TabsNext#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TabsNextInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TabsNextInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TabsNextInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TabsNextPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TabsNextInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`ariaLabel`	`string`	—
Aria label for the next button.
`lazy`	`boolean`	`false`
When enabled, the button is unmounted from the DOM when it is not needed.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-disabled`	Present when disabled

Defines passthrough(pt) options of TabsNext component.

label	type	description
root	TabsNextPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

Accessibility#

Tabs uses role="tablist" on the tab container, role="tab" on each tab trigger, and role="tabpanel" on each panel. Active tabs set aria-selected="true". Panels are linked to their tabs via aria-controls and aria-labelledby. Disabled tabs set aria-disabled="true".

Keyboard Support#

Key	Function
`tab`	Moves focus into the tab list, then to the panel.
`right arrow`	Moves focus to the next tab.
`left arrow`	Moves focus to the previous tab.
`home`	Moves focus to the first tab.
`end`	Moves focus to the last tab.
`enter`	Activates the focused tab.
`space`	Activates the focused tab.

Tabs

Account Info

Payment

Preferences

Pre-styled Versions

Features#

Usage#

Behavior#

Polymorphic Rendering#

Render Function Children#

Pass Through#

Account Info

Payment

Preferences

API#

TabsRoot#

TabsList#

TabsContent#

TabsTab#

TabsIndicator#

TabsPanels#

TabsPanel#

TabsPrev#

TabsNext#

Accessibility#

Keyboard Support#

Account Info

Payment

Preferences

Tabs

Account Info

Payment

Preferences

Pre-styled Versions

Features#

Usage#

Behavior#

Polymorphic Rendering#

Render Function Children#

Pass Through#

Account Info

Payment

Preferences

API#

TabsRoot#

TabsList#

TabsContent#

TabsTab#

TabsIndicator#

TabsPanels#

TabsPanel#

TabsPrev#

TabsNext#

Accessibility#

Screen Reader#

Keyboard Support#

Account Info

Payment

Preferences