Tabs

Horizontal set of Tab items that switch between related panels in the same context.

import { Tabs } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { Tabs, Tab, TabList, TabPanel } from '@basiiik/ui';

<Tabs><TabList aria-label="Project sections"><Tab value="overview">Overview</Tab><Tab value="activity">Activity</Tab></TabList><TabPanel value="overview">Summary</TabPanel><TabPanel value="activity">Recent activity</TabPanel></Tabs>

Compose Tabs, TabList, Tab and TabPanel. Selection is controlled (value, onValueChange) or uncontrolled (defaultValue). Arrow keys, Home and End move focus and select (roving tabindex).
Compose with: tab.
Storybook: Navigation/Tabs.

Props

Prop	Type	Notes
`variant`	`"line" \| "pill"`	Default "line"
`children`	`ReactNode`

Other props

Prop	Type	What it does
`value`	`string`	Controlled selected tab value.
`defaultValue`	`string`	Initially selected tab value when uncontrolled.
`onValueChange`	`(value: string) => void`

States. Compose Tabs, TabList, Tab and TabPanel. Selection is controlled (value, onValueChange) or uncontrolled (defaultValue). Arrow keys, Home and End move focus and select (roving tabindex).

Native attributes such as className, id and data-* are forwarded to the root element.

Parts

`TabList`

The row of Tab buttons. It needs a name: aria-label or aria-labelledby.

<TabList aria-label="Project sections"><Tab value="files">Files</Tab></TabList>

TabList props

Prop	Type	What it does
`aria-label`	`string`	A tab list needs a name: `aria-label` or `aria-labelledby`.
`aria-labelledby`	`string`	Identifies the element (or elements) that labels the current element.

`TabPanel`

The content of one tab. value must equal the value of its Tab; only the selected panel is shown.

<TabPanel value="files">Files go here</TabPanel>

TabPanel props

Prop	Type	What it does
`value` required	`string`

Use it when

Switch between related views in the same context

Do not use it when

Sequential steps (use a stepper)
More than about 6 sections

Rules for agents

Compose Tabs > TabList > Tab, plus one TabPanel per Tab, matched by value
Name the TabList with aria-label or aria-labelledby
Set defaultValue (or value with onValueChange) so exactly one tab is selected from the start
Use variant="line" for page sections and variant="pill" for compact switching inside a card or panel
Keep to about 2 to 6 tabs with short labels

Avoid

Tabs for steps that must be done in order (use Stepper)
Tabs that navigate to other pages (use Navbar links or Sidebar Item)
A single Tab, or so many that they scroll or wrap
Nesting Tabs inside a TabPanel of other Tabs
Disabling a Tab without saying why its content is unavailable

Writing the content

Labels are one or two words, nouns: 'Overview', 'Activity', 'Settings'
Labels are parallel in form and length
Use sentence case

Keyboard

Left and Right arrows move
Home and End jump
Tab moves into the panel

Accessibility

Each panel: role="tabpanel" aria-labelledby its tab
aria-orientation if vertical

Colour tokens it reads

color.bg.brand.subtlecolor.border.brandcolor.border.subtlecolor.text.brandcolor.text.disabledcolor.text.secondary

navigation 2 Figma variants Try it in the live demo