Tabs

Tabs organize groups of related content and let users navigate between them.

Tab API

import * as Tabs from '@base_ui/react/Tabs';
const Tab = Tabs.Tab;

Props of the native component are also available.

Name	Type	Description
className	func \| string	Class names applied to the element or a function that returns them based on the component's state.
render	element \| func	A function to customize rendering of the component.
value	any	You can provide your own value. Otherwise, it falls back to the child position index.

The ref is forwarded to the root element.

You can use Tab to change the default props of this component with the theme.

import * as Tabs from '@base_ui/react/Tabs';
const TabIndicator = Tabs.Indicator;

Props of the native component are also available.

Name	Type	Default	Description
className	func \| string	-	Class names applied to the element or a function that returns them based on the component's state.
render	element \| func	-	A function to customize rendering of the component.
renderBeforeHydration	bool	false	If `true`, the indicator will include code to render itself before React hydrates. This will minimize the time the indicator is not visible after the SSR-generated content is downloaded.

The ref is forwarded to the root element.

You can use TabIndicator to change the default props of this component with the theme.

import * as Tabs from '@base_ui/react/Tabs';
const TabPanel = Tabs.Panel;

Props of the native component are also available.

Name	Type	Default	Description
className	func \| string	-	Class names applied to the element or a function that returns them based on the component's state.
keepMounted	bool	false	If `true`, keeps the contents of the hidden TabPanel in the DOM.
render	element \| func	-	A function to customize rendering of the component.
value	any	-	The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected. If not provided, it will fall back to the index of the panel. It is recommended to explicitly provide it, as it's required for the tab panel to be rendered on the server.

The ref is forwarded to the root element.

You can use TabPanel to change the default props of this component with the theme.

import * as Tabs from '@base_ui/react/Tabs';
const TabsList = Tabs.List;

Props of the native component are also available.

Name	Type	Default	Description
activateOnFocus	bool	true	If `true`, the tab will be activated whenever it is focused. Otherwise, it has to be activated by clicking or pressing the Enter or Space key.
className	func \| string	-	Class names applied to the element or a function that returns them based on the component's state.
loop	bool	true	If `true`, using keyboard navigation will wrap focus to the other end of the list once the end is reached.
render	element \| func	-	A function to customize rendering of the component.

The ref is forwarded to the root element.

You can use TabsList to change the default props of this component with the theme.

import * as Tabs from '@base_ui/react/Tabs';
const TabsRoot = Tabs.Root;

Props of the native component are also available.

Name	Type	Default	Description
className	func \| string	-	Class names applied to the element or a function that returns them based on the component's state.
defaultValue	any	-	The default value. Use when the component is not controlled.
direction	'ltr' \| 'rtl'	'ltr'	The direction of the text.
onValueChange	func	-	Callback invoked when new value is being set.
orientation	'horizontal' \| 'vertical'	'horizontal'	The component orientation (layout flow direction).
render	element \| func	-	A function to customize rendering of the component.
value	any	-	The value of the currently selected `Tab`. If you don't want any selected `Tab`, you can set this prop to `null`.

The ref is forwarded to the root element.

You can use TabsRoot to change the default props of this component with the theme.