Tabs

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

Import

NextUI exports 2 tabs-related components:

Tabs: The main component to display a tab list.
Tab: The component to display a tab item. The children of this component will be displayed as the content of the tab.

You can render tabs dynamically by using items prop.

You can use the onSelectionChange and selectedKey props to control the selected tab.

base: The main tabs slot, it wraps the items and the panels.
tabList: The tab list slot, it wraps the tab items.
tab: The tab slot, it wraps the tab item.
tabContent: The tab content slot, it wraps the tab content.
cursor: The cursor slot, it wraps the cursor. This is only visible when disableAnimation=false
panel: The panel slot, it wraps the tab panel (content).

You can customize the Tabs component by passing custom Tailwind CSS classes to the component slots.

Tab has the following attributes on the base element:

data-selected: When the tab is selected.
data-disabled: When the tab is disabled.
data-hover: When the tab is being hovered. Based on useHover.
data-hover-selected: When the tab is being hovered and is not selected. Based on useHover and selected state.
data-focus: When the tab is being focused. Based on useFocusRing.
data-focus-visible: When the tab is being focused with the keyboard. Based on useFocusRing.
data-pressed: When the tab is pressed. Based on usePress.

Support for mouse, touch, and keyboard interactions on tabs.
Keyboard event support for arrows keys.
Support for disabled tabs.
Follows the tabs ARIA pattern, semantically linking tabs and their associated tab panels.
Focus management for tab panels without any focusable children.

Attribute	Type	Description	Default
children*	`ReactNode` \| `((item: T) => ReactElement)`	The list of tabs.	-
variant	`solid` \| `bordered` \| `light` \| `underlined`	The tabs appearance style.	`solid`
color	`default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`	The tabs color theme.	`default`
size	`sm` \| `md` \| `lg`	The tabs size.	`md`
radius	`none` \| `sm` \| `md` \| `lg` \| `full`	The tabs border radius.	-
fullWidth	`boolean`	Whether the tabs should take the full width of its parent.	`false`
items	`Iterable<T>`	The list of tabs (dynamic).	-
disabledKeys	`React.Key[]`	The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.	-
selectedKey	`React.Key`	The key for the currently selected item.	-
defaultSelectedKey	`React.Key`	The key for the initially selected item.	-
disallowEmptySelection	`boolean`	Whether the tabs should allow empty selection.	`false`
keyboardActivation	`automatic` \| `manual`	Whether tabs are activated automatically on focus or manually.	`automatic`
motionProps	MotionProps	The props to modify the cursor framer motion animation. Use the `variants` API to create your own animation.	-
disableCursorAnimation	`boolean`	Whether the cursor should be hidden.	`false`
isDisabled	`boolean`	Whether the tab list should be disabled.	`false`
disableAnimation	`boolean`	Whether the tab list should be animated.	`false`
classNames	`Record<"base"｜ "tabList"｜ "tab"｜ "tabContent"｜ "tabContent" ｜ "cursor" ｜ "panel", string>`	Allows to set custom class names for the card slots.	-

Attribute	Type	Description
onSelectionChange	`(key: React.Key) => any`	Handler that is called when the selection changes.

Attribute	Type	Description	Default
children*	`ReactNode`	The content of the tab.	-
title	`ReactNode`	The title of the tab.	-
titleValue	`string`	A string representation of the item's contents. Use this when the `title` is not readable.	-

export type MotionProps = HTMLMotionProps<"div">; // @see https://www.framer.com/motion/