Skip to content
Twentyfirst UIPro

Tabs

Navigation · Tabs, Panel, KeyValue

View as Markdown

A tab bar that switches views. With panels it renders the panels too, wired with the tab, tablist and tabpanel roles; without, it is a bar you connect to your own content.

  • Keyboard: ←/→ move between tabs and select them, Home/End jump; only the selected tab is in the tab order.
  • block stretches the tabs to the full width.

Northwind

Plan
Team · 24 seats
MRR
€1,240
Renews
May 1, 2026

Props

Tabs

PropTypeNotes
itemsstring[]Required
value?string
defaultValue?string
onChange?(v: string) => void
block?boolean
panels?Record<string, ReactNode>Content per tab; renders the tab panels under the bar, wired with tab/tabpanel roles.
label?stringAccessible name of the tab list.
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

Panel

PropTypeNotes
side?boolean
title?string
subtitle?string
action?ReactNode
children?ReactNode
surface?Surface`"glass"`: translucent glass over what is behind (maps, 3D, video, photos); `"solid"` opts out inside a glass `UIProvider`.
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

KeyValue

PropTypeNotes
itemsKeyValueItem[]Required
dense?boolean
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.