DSNiemeyer
Language

Tabs

Tab navigation between related content.

Basic

General information about the property, including basics and current status.

Variants

Three styles for different surfaces — `default` (segmented, on muted backgrounds), `line` (underlined, on plain backgrounds), `pill` (rounded, on bordered cards).

Default

Line

Pill

Sizes

`default` matches standard controls (h-10); `sm` is for dense contexts (h-8); `xs` aligns with compact toolbar toggles (h-6, same scale as Button xs).

Default (h-10)

Small (h-8)

Extra small (h-6)

Rich content

NameAurora Building
Address123 Flower St
TypeResidential
Units48

Props

PropTypeDefaultDescription
valuestringActive tab
onValueChange(v: string) => voidTab change handler

Full shadcn composition, examples, and field tables: shadcn/ui — Tabs (Radix)