Tabs
A Base UI Tabs family for switching related panels with default, underline, and opt-in sortable list treatments.
Overview content
Controls
import { Tabs, TabsList, TabsPanel, TabsTab } from "raft-ui";
<Tabs defaultValue="overview">
<TabsList>
<TabsTab value="overview" />
</TabsList>
<TabsPanel value="overview" />
</Tabs>Overview
Overview
placement puts the tab list on any side of the panels. left and right stack the tabs vertically and switch keyboard navigation to the up and down arrows; the underline indicator always sits on the side that faces the panels.
Name, topic, and description of #design-review.
Name, topic, and description of #design-review.
Name, topic, and description of #design-review.
Name, topic, and description of #design-review.
Overview
Messages
placementdefault: "top""top" | "bottom" | "left" | "right"
Side of the panels the tab list sits on. left and right stack the tabs vertically and default orientation to vertical.
valueT
Controlled active tab value.
defaultValueT
Initial active tab value for uncontrolled use.
onValueChange(value: T, eventDetails) => void
Called when Base UI changes the active tab.
...propsBaseTabs.Root.Props
Base UI Tabs root props for orientation and other root behavior.
| Prop | Type | Default | Description |
|---|---|---|---|
placement | "top" | "bottom" | "left" | "right" | "top" | Side of the panels the tab list sits on. left and right stack the tabs vertically and default orientation to vertical. |
value | T | — | Controlled active tab value. |
defaultValue | T | — | Initial active tab value for uncontrolled use. |
onValueChange | (value: T, eventDetails) => void | — | Called when Base UI changes the active tab. |
...props | BaseTabs.Root.Props | — | Base UI Tabs root props for orientation and other root behavior. |
variantdefault: "default""default" | "underline"
Visual treatment for the tab list. Defaults to the chip-style default variant.
...propsBaseTabs.List.Props
Tab list container. Compose TabsTab as children.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "underline" | "default" | Visual treatment for the tab list. Defaults to the chip-style default variant. |
...props | BaseTabs.List.Props | — | Tab list container. Compose TabsTab as children. |
valueT
The tab value passed to Base UI.
...propsBaseTabs.Tab.Props
Tab trigger. Compose icon and TabsLabel as children.
| Prop | Type | Default | Description |
|---|---|---|---|
value | T | — | The tab value passed to Base UI. |
...props | BaseTabs.Tab.Props | — | Tab trigger. Compose icon and TabsLabel as children. |
...propsComponentPropsWithRef<"span">
Optional text slot for icon-and-label tab layouts.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | ComponentPropsWithRef<"span"> | — | Optional text slot for icon-and-label tab layouts. |
valueT
Associates the panel with its matching TabsTab value.
...propsBaseTabs.Panel.Props
Panel content associated with a tab value.
| Prop | Type | Default | Description |
|---|---|---|---|
value | T | — | Associates the panel with its matching TabsTab value. |
...props | BaseTabs.Panel.Props | — | Panel content associated with a tab value. |
valuereadonly T[]
Current tab order.
onReorder(value: T[]) => void
Receives the new order after drag end.
variantdefault: "default""default" | "underline"
Visual treatment inherited by the underlying TabsList.
...propsTabsListProps
Sortable TabsList wrapper. Compose SortableTabsTab as children.
| Prop | Type | Default | Description |
|---|---|---|---|
value | readonly T[] | — | Current tab order. |
onReorder | (value: T[]) => void | — | Receives the new order after drag end. |
variant | "default" | "underline" | "default" | Visual treatment inherited by the underlying TabsList. |
...props | TabsListProps | — | Sortable TabsList wrapper. Compose SortableTabsTab as children. |
valueT
A sortable tab value passed to Base UI and dnd-kit.
...propsTabsTabProps
Draggable tab trigger used inside SortableTabsList.
| Prop | Type | Default | Description |
|---|---|---|---|
value | T | — | A sortable tab value passed to Base UI and dnd-kit. |
...props | TabsTabProps | — | Draggable tab trigger used inside SortableTabsList. |
itemsreadonly OrderedTabItem[]
Canonical tab definitions keyed by id.
storedOrderreadonly string[]
Persisted order to reconcile against items; unknown ids are dropped.
| Prop | Type | Default | Description |
|---|---|---|---|
items | readonly OrderedTabItem[] | — | Canonical tab definitions keyed by id. |
storedOrder | readonly string[] | — | Persisted order to reconcile against items; unknown ids are dropped. |