Tabs

A tab is a navigation component that allows users to switch between different sections of content.

Third Party Library

This component uses at least one third party library under the hood. Refer to the library's documentation below for more information on the API.

API Documentation

Import

import { Tabs } from "@aeonkit/react";

Usage

Default

The default tabs component.

Preview

My Cool Tab 1

Content tab 1

My Cool Tab 2

Code

<Tabs defaultValue="tab1">
  <Tabs.List>
    <Tabs.Tab value="tab1">My Cool Tab 1</Tabs.Tab>
    <Tabs.Tab value="tab2">My Cool Tab 2</Tabs.Tab>
  </Tabs.List>
  <Tabs.Content value="tab1">
    <p className="text-sm">Content tab 1</p>
  </Tabs.Content>
  <Tabs.Content value="tab2">
    <p className="text-sm">Content tab 2</p>
  </Tabs.Content>
</Tabs>

Underline

Change the variant to underline using the variant prop.

Preview

My Cool Tab 1

Content tab 1

My Cool Tab 2

Code

<Tabs variant="underline" defaultValue="tab1">
  <Tabs.List>
    <Tabs.Tab value="tab1">My Cool Tab 1</Tabs.Tab>
    <Tabs.Tab value="tab2">My Cool Tab 2</Tabs.Tab>
  </Tabs.List>
  <Tabs.Content value="tab1">
    <p className="text-sm ">Content tab 1</p>
  </Tabs.Content>
  <Tabs.Content value="tab2">
    <p className="text-sm ">Content tab 2</p>
  </Tabs.Content>
</Tabs>

Props

Tabs

variant?

"underline" "pill"

The variant of the tabs

Default: pill

API Interface: TabsProps

Tabs.Content

API Interface: TabsContentProps

Tabs.List

API Interface: TabsListProps

Tabs.Trigger

API Interface: TabsTriggerProps