Components/Tabs

Tabs

Switch between related views. Supports line, pill, and card visual variants.


Your account overview and recent activity.

Installation

npx ajaxui add tabs

Variants

Line variant.
Pill variant.
Card variant.

Props

Tabs
PropTypeDefault
valuestring-
defaultValuestring""
onValueChange(value: string) => void-
variant"line" | "pill" | "card""line"
TabsTrigger
PropTypeDefault
valuestring-
iconReactNode-
TabsContent
PropTypeDefault
valuestring-

Anatomy

<Tabs defaultValue="a">          // owns active value
  <TabsList>                     // tablist row
    <TabsTrigger value="a"/>     // one per panel
  </TabsList>
  <TabsContent value="a"/>       // matches a trigger
</Tabs>