Navigation@knitui/components

Tabs

Tabs organises content into labelled panels. Compose Tabs.List + Tabs.Tab with matching Tabs.Panel elements. variant styles the indicator, orientation switches the axis, inverted places the list after the panels, and placement controls which side the list sits on when vertical.

WebiOSAndroid5 style slots12 own props13 examples

Stories Source Tests Open in Storybook

import { Tabs } from "@knitui/components";

Playground

Loading playground…

variantVisual style of the tab indicator.

orientationLayout axis of the tab list.

sizeSize of tab labels and spacing.

placementSide the list sits on when orientation is vertical.

invertedRender the tab list after the panels.

false

keepMountedKeep inactive panels mounted (hidden) in the DOM.

true

allowTabDeactivationAllow clicking an active tab to deselect it.

false

loopWrap arrow-key roving focus at the ends.

true

Playground

<Tabs
  variant="default"
  orientation="horizontal"
  inverted={false}
  keepMounted
  allowTabDeactivation={false}
  loop
  defaultValue="general"
  size="sm"
/>

Examples

Variants

All three visual variants side by side.

Loading example…

VariantsSource Storybook

Sizes

Full token size scale.

Loading example…

SizesSource Storybook

Shadows

The shadow elevation prop, inherited from Box, applied to the Tabs root.

Loading example…

ShadowsSource Storybook

Themed

Accent theme comes from Tamagui's theme prop.

Loading example…

ThemedSource Storybook

With Disabled Tab

A disabled tab cannot be activated and is visually dimmed.

Loading example…

With Disabled TabSource Storybook

With Sections

Tabs with left/right icon sections for visual adornment.

Loading example…

With SectionsSource Storybook

Vertical

Vertical orientation with the list on the left side (default placement).

Loading example…

VerticalSource Storybook

Vertical Right

Vertical orientation with the tab list placed on the right side.

Loading example…

Vertical RightSource Storybook

Inverted

Inverted layout — the tab list renders below the panel content.

Loading example…

InvertedSource Storybook

Controlled

Controlled — the active tab is owned by the parent component.

Loading example…

ControlledSource Storybook

Growing Tabs

grow makes tabs expand to fill the full width of the list.

Loading example…

Growing TabsSource Storybook

Styles

Per-slot styles targets individual parts — here the tab, label and panel.

Loading example…

StylesSource Storybook

Props

Prop	Type	Default	Description
`activateTabWithKeyboard`	`boolean \| undefined`	`true`	When an arrow key focuses a tab, also activate it. `false` = manual activation (focus moves, selection follows on Enter/Space). Web-only.
`allowTabDeactivation`	`boolean \| undefined`	`false`	Allow clicking an active tab to deselect it.
`children`	`ReactNode`	—	`Tabs.List` + `Tabs.Panel` children.
`defaultValue`	`string \| null \| undefined`	`general`	Uncontrolled initial value.
`disabled` system	`boolean \| undefined`	—
`id`	`string \| undefined`	—	Base id for a11y ids. Auto-generated if omitted.
`inverted`	`boolean \| undefined`	`false`	Render the tab list after the panels.
`keepMounted`	`boolean \| undefined`	`true`	Keep inactive panels mounted (hidden) in the DOM.
`loop`	`boolean \| undefined`	`true`	Wrap arrow-key roving focus at the ends.
`onChange`	`((value: string \| null) => void) \| undefined`	—	Called when the active tab changes.
`orientation`	`TabsOrientation \| undefined` horizontal · vertical	`'horizontal'`	Layout axis of the tab list.
`placement`	`TabsPlacement \| undefined` left · right	`'left'`	Side the list sits on when orientation is vertical.
`radius` system	`string \| number \| undefined`	—
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`size` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined` xxs · xs · sm · md · lg · xl · xxl	`'md'`	Size of tab labels and spacing.
`styles` system	`SlotStyles<TabsStyles> \| undefined`	—	Uniform per-slot style passthrough — sugar over the composable parts. Slots: `list` / `tab` / `label` / `section` / `panel`. Distributed through context so it reaches every nested `Tabs.Tab`/`Tabs.Panel`. Explicit inline props on a composed part always win.
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`value`	`string \| null \| undefined`	—	Controlled active tab value.
`variant` system	`TabsVariant \| undefined` default · outline · pills	`'default'`	Visual style of the tab indicator.

Style slots

Every part of Tabs can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`label`	`styles={{ label: { … } }}`
`list`	`styles={{ list: { … } }}`
`panel`	`styles={{ panel: { … } }}`
`section`	`styles={{ section: { … } }}`
`tab`	`styles={{ tab: { … } }}`

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 495 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.