AeontelAeontel Docs

Tabs

Tabbed navigation with list, triggers, and content panels.

Usage

TSX
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@aeontel/ui";

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="runs">Runs</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Overview panel.</TabsContent>
  <TabsContent value="runs">Runs list.</TabsContent>
</Tabs>;

Exports

Tabs

Tabs root container.

TypeScript
Tabs(props: TabsPrimitive.Root.Props): JSX.Element

TabsList

List of tab triggers.

TypeScript
TabsList(props: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>): JSX.Element

Props

PropTypeDefaultDescription
variant?"line" | "default" | null | undefined"default"

TabsTrigger

Single tab trigger button.

TypeScript
TabsTrigger(props: TabsPrimitive.Tab.Props): JSX.Element

TabsContent

Content panel associated with a tab.

TypeScript
TabsContent(props: TabsPrimitive.Panel.Props): JSX.Element

tabsListVariants

cva variant builder for the tabs list classNames.

TypeScript
tabsListVariants(config?: { variant?: TabsListVariant; className?: string }): string