Tabs

Two variants: joined segments and a quieter line.

pulls in@base-ui/reactclass-variance-authority@afterglow/theme

412 entries, 3 locked.

Installation

npx shadcn@latest add @afterglow/tabs

Component structure.

Tabs
├── TabsList
│   └── TabsTrigger
└── TabsContent

The quieter one, for when the tabs are navigation rather than a switch.

Four volumes.

segment is the house shape, a switch. line is the quieter one, for tabs that are navigation and should not read as a control.

Prop	Type	Default
variant	"segment" \| "line"	"segment"

Everything else is Base UI tabs's API, documented there.