Tabs — Davaux UI

Default

Overview content goes here.

const tabs = [
  { value: 'overview', label: 'Overview', panel: <Text>Overview content.</Text> },
  { value: 'settings', label: 'Settings', panel: <Text>Settings content.</Text> },
  { value: 'billing',  label: 'Billing',  panel: <Text>Billing content.</Text> },
]

<Tabs tabs={tabs} defaultValue="overview" id="my-tabs" />

Variants

variant="default"

Overview content goes here.

variant="outline"

Overview content goes here.

variant="pills"

Overview content goes here.

<Tabs tabs={tabs} variant="default" />
<Tabs tabs={tabs} variant="outline" />
<Tabs tabs={tabs} variant="pills" />

Color

Overview content goes here.

<Tabs tabs={tabs} color="violet" />
<Tabs tabs={tabs} color="blue" />
<Tabs tabs={tabs} color="green" />

Grow

Tabs fill the full width of the list when grow is set.

Overview content goes here.

<Tabs tabs={tabs} grow />

Vertical orientation

Overview content goes here.

<Tabs tabs={tabs} orientation="vertical" />

With icons and sections

Overview panel.

const tabs = [
  {
    value: 'overview',
    label: 'Overview',
    leftSection: <OverviewIcon />,
    rightSection: <Badge size="xs">3</Badge>,
    panel: <Text>Overview panel.</Text>,
  },
  {
    value: 'settings',
    label: 'Settings',
    leftSection: <SettingsIcon />,
    panel: <Text>Settings panel.</Text>,
  },
  {
    value: 'disabled',
    label: 'Disabled',
    disabled: true,
    panel: <Text>You won't see this.</Text>,
  },
]

<Tabs tabs={tabs} id="my-tabs" />

Props

Prop	Type	Default	Description
`tabs`	`TabItem[]`	—	Array of tab definitions
`defaultValue`	`string`	first tab	Initially active tab value
`variant`	`'default'\|'outline'\|'pills'`	`'default'`	Visual style
`orientation`	`'horizontal'\|'vertical'`	`'horizontal'`	Tab list direction
`color`	`UiColor`	—	Active tab indicator color
`radius`	`'xs'\|'sm'\|'md'\|'lg'\|'xl'\|string`	—	Tab button corner radius
`grow`	`boolean`	—	Tabs fill the full tab list width
`inverted`	`boolean`	—	Active indicator appears on the opposite edge
`id`	`string`	—	Base ID for ARIA tab/panel relationships

TabItem

Field	Type	Description
`value`	`string`	Unique key
`label`	`children`	Tab button content
`panel`	`children`	Panel content when this tab is active
`leftSection`	`children`	Content before the label
`rightSection`	`children`	Content after the label
`disabled`	`boolean`	Prevents selection