Bridge UI

Tabs

Organize related content into tabbed views with TabList, Tab, TabPanel, and TabItem.

Introduction

Tabs organize related content into tabbed views. Compose with TabList, Tab, and TabPanel, or use the TabItem shortcut. The selected accent uses the full semantic color palette; inactive tabs use dark-*.

Use the framework selector in the site header to switch between React and Vue.

Import

import { Tabs } from "@bridge-ui/vue/Components/Tabs";
import { Tab } from "@bridge-ui/vue/Components/Tab";
import { TabItem } from "@bridge-ui/vue/Components/TabItem";
import { TabList } from "@bridge-ui/vue/Components/TabList";
import { TabPanel } from "@bridge-ui/vue/Components/TabPanel";
import { Tabs } from "@bridge-ui/react/Components/Tabs";
import { Tab } from "@bridge-ui/react/Components/Tab";
import { TabItem } from "@bridge-ui/react/Components/TabItem";
import { TabList } from "@bridge-ui/react/Components/TabList";
import { TabPanel } from "@bridge-ui/react/Components/TabPanel";

Basic usage

Control selection with value / onChange (React) or v-model (Vue). Each Tab and TabPanel shares a value.

bun install
bun install

TabItem shortcut

TabItem renders both the tab trigger and its panel. Pass label for the trigger and children for the panel content.

Icons

Pass icons with startIcon / endIcon, or custom nodes via slots.start / slots.end.

Account settings
Account settings

Colors

Use the color prop for the selected tab accent. Available colors: primary, secondary, success, info, warning, error, and dark.

First panel (dark)
First panel (info)
First panel (error)
First panel (primary)
First panel (success)
First panel (warning)
First panel (secondary)

Variants

Available variants: line (default), plain, pill, solid, and enclosed. Pair with any color from the palette above.

First panel (line)
First panel (pill)
First panel (plain)
First panel (solid)
First panel (enclosed)

Vertical

Set orientation="vertical" for a side-aligned tab list.

Account content
Account content

Manual activation

With activation="manual", arrow keys move focus without changing the selected tab until Enter or Space.

Panel A — press Enter or Space to activate
Panel A — press Enter or Space to activate

Nested customProps

With TabItem, Tabs maps list/triggers/panels and merges customProps.tabList, customProps.tab, and customProps.tabPanel. Item-owned props (value, icons, label, keepMounted, panel content) are not overridable via nested customProps. TabItem slots are not shallow-merged from customProps.tab.

<Tabs
  defaultValue="bun"
  customProps={{
    tabList: { className: "gap-2" },
    tab: { classes: { root: "px-3" } },
  }}
>
  <TabItem label="bun" value="bun">
    bun install
  </TabItem>
  <TabItem label="npm" value="npm">
    npm install
  </TabItem>
</Tabs>

Badge, Avatar, Icon, Toggle Group

API

Tabs

Prop Type Default
v-model / modelValue string first registered tab
@update:model-value (value: string) => void —
Prop Type Default
value string —
defaultValue string first registered tab
onChange (value: string) => void —
Prop Type Default Description
orientation TabsOrientation "horizontal" Layout orientation of the tab list.
variant TabsVariant "line" Visual style of the tab list / selected tab.
color TabsColor "primary" Accent color for the selected tab.
size TabsSize "md" Size of the tab list and triggers.
activation TabsActivation "automatic" Keyboard activation: automatic selects on arrow focus; manual needs Enter/Space.
keepMounted boolean true When true, inactive panels stay mounted (hidden).
customProps TabsCustomProps — With TabItem, forwards props to mapped TabList / Tab / TabPanel. Item-owned props stay on each item.

Tab

Prop Type Default
value string required
startIcon IconSource —
endIcon IconSource —
disabled boolean false
slots { start?, end? } —

TabList

HTML attributes on the role="tablist" container (aria-label, className, etc.).

TabPanel

Prop Type Default
value string required
keepMounted boolean inherits from Tabs

TabItem

Prop Type Default
value string required
label ReactNode / Vue slot content required
startIcon IconSource —
endIcon IconSource —
disabled boolean false
keepMounted boolean inherits from Tabs
slots { start?, end? } —
children panel content —