Components
Tabs
React Aria Tabs, composed with Badge - 4 shared button types plus an orientation-specific underline/line type, two sizes, optional icon and count badge - driven from config/design-system.config.ts.
Contextual config
Tabs sections
Show or hide documentation sections on this page. Changes apply immediately and persist across the site.
Component Playground
Live instance - the controls read their options from the same config that drives the Types section below.
Controls
Orientation
Type
Size
Types
4 types work in either orientation - button-brand, button-gray, button-border, button-minimal. underline is horizontal-only, line is its vertical equivalent.
Horizontal
Button brand / Button gray / Button border / Button minimal / Underline
button-brandbutton-graybutton-borderbutton-minimalunderlineVertical
Button brand / Button gray / Button border / Button minimal / Line
button-brandbutton-graybutton-borderbutton-minimallineSizes
Two sizes - sm (default) and md.
Small / Medium
Full width
Pass fullWidth on Tabs.List to stretch tabs across the available width - common for the underline type on a page-level tab bar.
Full width, underline
API
Tabs holds selection state; Tabs.List (alias TabList) renders the clickable row/column of Tabs.Items (alias Tab); each has a matching Tabs.Panel (alias TabPanel) with the same id.
Tabs
| Prop | Type | Default |
|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" |
keyboardActivation | "automatic" | "manual" | "manual" |
className | string | - |
children | ReactNode | - |
Tabs.List
| Prop | Type | Default |
|---|---|---|
size | "sm" | "md" | "sm" |
type | HorizontalTypes | VerticalTypes (see Types below) | "button-brand" |
orientation | "horizontal" | "vertical" | inherited from Tabs |
fullWidth | boolean | false |
items | T[] | - |
className | string | - |
Tabs.Item
| Prop | Type | Default |
|---|---|---|
id | Key | - |
label | ReactNode | - |
icon | FC<{ className?: string }> | ReactNode | - |
badge | number | string | - |
isDisabled | boolean | false |
children | ReactNode | ((props: TabRenderProps) => ReactNode) | - |
Tabs.Panel
| Prop | Type | Default |
|---|---|---|
id | Key | - |
children | ReactNode | - |
Usage
import { Tabs } from "@/components/application/tabs/tabs";
import { Users01 } from "@untitledui/icons";
<Tabs orientation="horizontal">
<Tabs.List type="button-brand" size="sm">
<Tabs.Item id="overview" label="Overview" />
<Tabs.Item id="team" label="Team" icon={Users01} badge={8} />
<Tabs.Item id="settings" label="Settings" />
</Tabs.List>
<Tabs.Panel id="overview">Overview content</Tabs.Panel>
<Tabs.Panel id="team">Team content</Tabs.Panel>
<Tabs.Panel id="settings">Settings content</Tabs.Panel>
</Tabs>Figma
No linked Figma file yet - this component was pulled in via the Untitled UI CLI, not designed in Figma first.