Tabs

Overview

Built on Radix UI's Tabs primitive. Supports horizontal and vertical orientations, and two visual tab list styles: pill/background (default) and underline (line).

Usage

import { Tabs } from "@leanicon/web-builder-library";

<Tabs defaultValue="overview">
  <Tabs.List>
    <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
    <Tabs.Trigger value="details">Details</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="overview">Overview content</Tabs.Content>
  <Tabs.Content value="details">Details content</Tabs.Content>
</Tabs>;

Variants

Default (pill style)

Line style (underline indicator)

Vertical orientation

Vertical with line style

Notes

• Tabs.List accepts variant="line" for underline style or "default" for pill/background style.
• orientation="vertical" with className="flex-row" creates a side-tab layout.
• Dark mode is handled via semantic tokens.