Tabs

Layered sections of content shown one panel at a time, in underline or pill style.

Underline

<Tabs defaultValue="overview" variant="underline">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="payments">Payments</TabsTrigger>
    <TabsTrigger value="statements">Statements</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Membership #48211 is in good standing.</TabsContent>
  <TabsContent value="payments">Last payment of $189.00 posted June 1.</TabsContent>
  <TabsContent value="statements">12 monthly statements available.</TabsContent>
</Tabs>

Pill

<Tabs defaultValue="dues" variant="pill">
  <TabsList>
    <TabsTrigger value="dues">Dues</TabsTrigger>
    <TabsTrigger value="adventurepass">AdventurePass</TabsTrigger>
    <TabsTrigger value="reservations">Reservations</TabsTrigger>
  </TabsList>
  <TabsContent value="dues">Autopay is on. $189.00 due July 1.</TabsContent>
  <TabsContent value="adventurepass">3 trip credits remaining this season.</TabsContent>
  <TabsContent value="reservations">Upcoming stay: Bass Lake, Aug 14–17.</TabsContent>
</Tabs>

Disabled tab

<Tabs defaultValue="active" variant="underline">
  <TabsList>
    <TabsTrigger value="active">Active plans</TabsTrigger>
    <TabsTrigger value="archived" disabled>Archived</TabsTrigger>
  </TabsList>
  <TabsContent value="active">1 active payment plan on this membership.</TabsContent>
</Tabs>