Components

Tabs

Tabbed navigation for organizing content into separate views. Supports multiple visual variants and sizes.

Underline Variant

The default underline indicator highlights the active tab with a colored bottom border.

This is the Overview panel. It provides a high-level summary of your project, including key metrics and recent activity.

Solid Variant

The solid variant uses a filled background on the active tab for a bolder visual.

General settings for your account. Update your display name, email, and profile picture.

Installation

npm install @trinkui/react

Import

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

Usage

Pass an array of tab items with keys, labels, and content.

<Tabs
  defaultKey="overview"
  items={[
    { key: "overview", label: "Overview", content: <p>Overview content here.</p> },
    { key: "features", label: "Features", content: <p>Features content here.</p> },
    { key: "pricing", label: "Pricing", content: <p>Pricing content here.</p> },
  ]}
/>

Variants

Three visual styles: underline, solid, and bordered.

{/* Default underline indicator */}
<Tabs variant="underline" items={items} />

{/* Solid background on active tab */}
<Tabs variant="solid" items={items} />

{/* Bordered box around active tab */}
<Tabs variant="bordered" items={items} />

Sizes

Available in three sizes: sm, md, and lg.

<Tabs size="sm" items={items} />
<Tabs size="md" items={items} />
<Tabs size="lg" items={items} />

Full Width

Set fullWidth to stretch the tabs to fill the container.

<Tabs fullWidth items={items} />

Props

Prop	Type	Default	Description
items	TabItem[]	-	Array of tab items with key, label, and content
defaultKey	string	-	Key of the initially active tab
variant	"underline" \| "solid" \| "bordered"	"underline"	Visual style of the tab indicator
size	"sm" \| "md" \| "lg"	"md"	Size of the tab items
fullWidth	boolean	false	Stretch tabs to fill the full container width

Accessibility

Uses role="tablist" on the tab container, role="tab" on each tab, and role="tabpanel" on the content panel.
The active tab has aria-selected="true"; inactive tabs have aria-selected="false".
Arrow keys navigate between tabs; Home and End jump to the first and last tab.
Each tab panel is associated with its tab via aria-controls and aria-labelledby.

← Table Textarea →