Tabs
A Base UI Tabs family for switching related panels with default, underline, and opt-in sortable list treatments.
Overview content
Controls
import { Tabs, TabsBackground, TabsList, TabsPanel, TabsTab } from "raft-ui";
<Tabs defaultValue="overview">
<TabsList>
<TabsBackground />
<TabsTab value="overview" />
</TabsList>
<TabsPanel value="overview" />
</Tabs>API#WIP
| Prop | Type | Default | Description |
|---|---|---|---|
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. |
| 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 TabsBackground and TabsTab as children. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | ComponentPropsWithRef<"span"> | — | Optional visual slot. Place it inside TabsList to render the default container surface or underline top edge. |
| 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. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | ComponentPropsWithRef<"span"> | — | Optional text slot for icon-and-label tab layouts. |
| 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. |
| 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 TabsBackground and SortableTabsTab as children. |
| 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. |
| 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. |