Navigation
Tabbed content navigation with a composable, roving-tabindex API.
Manage your account's profile information, timezone, and language preferences. These settings apply across every workspace you're a member of.
You're on the Pro plan, billed monthly. View invoices, update your payment method, or change plans at any time — changes take effect on your next billing cycle.
Invite teammates by email and assign them a role. Admins can manage billing and remove members; editors can create and edit content but can't change settings.
8 props across 4 groups
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | ((item: T) => ReactElement) | — | Declarative <Tab> children, or a render function with items. |
items | Iterable<T> | — | Dynamic items, used with a render-function children. |
title | ReactNode | — | Tab label (required). |
titleValue | string | — | Plain-text override of title, used for accessible naming when title is a node. |
children | ReactNode | — | Panel content for this tab. |
children
ReactNode | ((item: T) => ReactElement)
Default: —
Declarative <Tab> children, or a render function with items.
items
Iterable<T>
Default: —
Dynamic items, used with a render-function children.
title
ReactNode
Default: —
Tab label (required).
titleValue
string
Default: —
Plain-text override of title, used for accessible naming when title is a node.
children
ReactNode
Default: —
Panel content for this tab.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "solid" | "bordered" | "light" | "underlined" | solid | Visual style variant. |
color | "default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger" | default | Semantic color. |
size | "xs" | "xs-sm" | "sm" | "md" | "lg" | "xl" | md | Tab list size. |
radius | "none" | "xs" | "xs-sm" | "sm" | "md" | "lg" | "full" | full | Border radius. |
variant
"solid" | "bordered" | "light" | "underlined"
Default: solid
Visual style variant.
color
"default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger"
Default: default
Semantic color.
size
"xs" | "xs-sm" | "sm" | "md" | "lg" | "xl"
Default: md
Tab list size.
radius
"none" | "xs" | "xs-sm" | "sm" | "md" | "lg" | "full"
Default: full
Border radius.
| Prop | Type | Default | Description |
|---|---|---|---|
fullWidth | boolean | false | Stretches tabs to fill the available width. |
placement | "top" | "bottom" | "start" | "end" | top | Tab list position relative to panels. |
isVertical | boolean | false | Renders a vertical tab list. |
fullWidth
boolean
Default: false
Stretches tabs to fill the available width.
placement
"top" | "bottom" | "start" | "end"
Default: top
Tab list position relative to panels.
isVertical
boolean
Default: false
Renders a vertical tab list.
| Prop | Type | Default | Description |
|---|---|---|---|
disabledKeys | Key[] | — | Keys of tabs to disable. |
selectedKey | Key | — | Controlled selected tab key. |
defaultSelectedKey | Key | — | Uncontrolled initial selected tab key. |
shouldSelectOnPressUp | boolean | true | Selects on pointer-up rather than pointer-down. |
keyboardActivation | "automatic" | "manual" | automatic | Whether arrow-key focus also selects, or only Enter/Space does. |
isDisabled | boolean | false | Disables the whole tab list. |
destroyInactiveTabPanel | boolean | false | Unmounts inactive panels instead of hiding them. |
href / target / rel / download / ping / referrerPolicy | string | — | Renders the tab as a link when href is set. |
isDisabled | boolean | false | Disables this specific tab. |
shouldSelectOnPressUp | boolean | — | Per-tab override of the Tabs-level setting. |
disabledKeys
Key[]
Default: —
Keys of tabs to disable.
selectedKey
Key
Default: —
Controlled selected tab key.
defaultSelectedKey
Key
Default: —
Uncontrolled initial selected tab key.
shouldSelectOnPressUp
boolean
Default: true
Selects on pointer-up rather than pointer-down.
keyboardActivation
"automatic" | "manual"
Default: automatic
Whether arrow-key focus also selects, or only Enter/Space does.
isDisabled
boolean
Default: false
Disables the whole tab list.
destroyInactiveTabPanel
boolean
Default: false
Unmounts inactive panels instead of hiding them.
href / target / rel / download / ping / referrerPolicy
string
Default: —
Renders the tab as a link when href is set.
isDisabled
boolean
Default: false
Disables this specific tab.
shouldSelectOnPressUp
boolean
Default: —
Per-tab override of the Tabs-level setting.
| Prop | Type | Default | Description |
|---|---|---|---|
disableCursorAnimation | boolean | false | Disables the sliding active-tab cursor animation. |
disableAnimation | boolean | false | Disables all animation, including the cursor. |
disableCursorAnimation
boolean
Default: false
Disables the sliding active-tab cursor animation.
disableAnimation
boolean
Default: false
Disables all animation, including the cursor.
| Prop | Type | Default | Description |
|---|---|---|---|
onSelectionChange | (key: Key) => void | — | Called when the selected tab changes. |
onSelectionChange
(key: Key) => void
Default: —
Called when the selected tab changes.
| Prop | Type | Default | Description |
|---|---|---|---|
classNames | TabsClassNames | — | Per-slot class overrides (base/tabList/tab/tabContent/cursor/panel/tabWrapper). |
className | string | — | Class applied to the root element. |
classNames
TabsClassNames
Default: —
Per-slot class overrides (base/tabList/tab/tabContent/cursor/panel/tabWrapper).
className
string
Default: —
Class applied to the root element.
