Tabs

Organizes content into switchable tabbed panels.

Default variant

Overview content goes here. This is the default tab.

tsx
<Tabs>
  <TabsItem title="Overview">
    <p>Overview content goes here. This is the default tab.</p>
  </TabsItem>
  <TabsItem title="Settings">
    <p>Settings content goes here. Configure your preferences.</p>
  </TabsItem>
  <TabsItem title="Billing">
    <p>Billing content goes here. Manage your subscription.</p>
  </TabsItem>
</Tabs>

Pills variant

Settings content goes here. Configure your preferences.

tsx
<Tabs variant="pills">
  <TabsItem title="Overview">
    <p>Overview content goes here. This is the default tab.</p>
  </TabsItem>
  <TabsItem title="Settings" selected>
    <p>Settings content goes here. Configure your preferences.</p>
  </TabsItem>
  <TabsItem title="Billing">
    <p>Billing content goes here. Manage your subscription.</p>
  </TabsItem>
</Tabs>