Tabs

Switch between sections of related content within a single view. Built on base-ui Tabs — keyboard navigation, roving focus, and ARIA wiring come for free.

Compose four parts: Tabs (root, owns the active value), TabsList (the trigger strip), TabsTrigger (one per section), and TabsContent (the panel for a value).

Default

The default variant is a filled segmented control — triggers ride on a muted track and the active one lifts onto a solid background.

A summary of the account, its plan, and recent usage.

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@vesyl/ui-next";

export default function TabsDefault() {
  return (
    <Tabs defaultValue="overview" className="w-full max-w-md">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="activity">Activity</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
      <TabsContent value="overview" className="mt-4 text-muted-foreground">
        A summary of the account, its plan, and recent usage.
      </TabsContent>
      <TabsContent value="activity" className="mt-4 text-muted-foreground">
        Every event on the account, newest first.
      </TabsContent>
      <TabsContent value="settings" className="mt-4 text-muted-foreground">
        Update profile, billing, and notification preferences.
      </TabsContent>
    </Tabs>
  );
}

Line (underline)

variant="line" drops the track and marks the active tab with a 2px underline. This is the right pick for page- or section-level navigation where the tabs sit above their content — e.g. the Users / Permissions split on a role detail page.

Members assigned to this role.

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@vesyl/ui-next";

export default function TabsLine() {
  return (
    <Tabs defaultValue="users" className="w-full max-w-md">
      <TabsList variant="line">
        <TabsTrigger value="users">Users</TabsTrigger>
        <TabsTrigger value="permissions">Permissions</TabsTrigger>
      </TabsList>
      <TabsContent value="users" className="mt-6 text-muted-foreground">
        Members assigned to this role.
      </TabsContent>
      <TabsContent value="permissions" className="mt-6 text-muted-foreground">
        Capabilities this role grants.
      </TabsContent>
    </Tabs>
  );
}

Pill

variant="pill" is a borderless strip — transparent rail, muted background on the active trigger only. Good for filter bars and in-card switches where a full segmented control would feel heavy.

Every order, regardless of status.

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@vesyl/ui-next";

export default function TabsPill() {
  return (
    <Tabs defaultValue="all" className="w-full max-w-md">
      <TabsList variant="pill">
        <TabsTrigger value="all">All</TabsTrigger>
        <TabsTrigger value="open">Open</TabsTrigger>
        <TabsTrigger value="closed">Closed</TabsTrigger>
      </TabsList>
      <TabsContent value="all" className="mt-4 text-muted-foreground">
        Every order, regardless of status.
      </TabsContent>
      <TabsContent value="open" className="mt-4 text-muted-foreground">
        Orders still awaiting fulfillment.
      </TabsContent>
      <TabsContent value="closed" className="mt-4 text-muted-foreground">
        Orders that have shipped or been cancelled.
      </TabsContent>
    </Tabs>
  );
}

With icons

Each TabsTrigger lays out its children in a row with a gap, and auto-sizes any leading svg to size-4. Drop a lucide icon in front of the label.

In-transit and delivered shipments.

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@vesyl/ui-next";
import { ChartLine, Package, Settings } from "lucide-react";

export default function TabsIcons() {
  return (
    <Tabs defaultValue="shipments" className="w-full max-w-md">
      <TabsList variant="line">
        <TabsTrigger value="shipments">
          <Package />
          Shipments
        </TabsTrigger>
        <TabsTrigger value="analytics">
          <ChartLine />
          Analytics
        </TabsTrigger>
        <TabsTrigger value="settings">
          <Settings />
          Settings
        </TabsTrigger>
      </TabsList>
      <TabsContent value="shipments" className="mt-6 text-muted-foreground">
        In-transit and delivered shipments.
      </TabsContent>
      <TabsContent value="analytics" className="mt-6 text-muted-foreground">
        Volume, spend, and carrier performance.
      </TabsContent>
      <TabsContent value="settings" className="mt-6 text-muted-foreground">
        Carrier accounts and label preferences.
      </TabsContent>
    </Tabs>
  );
}

Sizes

size controls trigger height and text size: md (default) or sm for dense toolbars. Set it once on TabsList — triggers inherit it.

size="sm" — compact, for dense toolbars.

size="md" — the default.

import { Tabs, TabsContent, TabsList, TabsTrigger, VStack } from "@vesyl/ui-next";

export default function TabsSizes() {
  return (
    <VStack gap={6} className="w-full max-w-md">
      <Tabs defaultValue="overview" className="w-full">
        <TabsList size="sm">
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="activity">Activity</TabsTrigger>
          <TabsTrigger value="settings">Settings</TabsTrigger>
        </TabsList>
        <TabsContent value="overview" className="mt-4 text-muted-foreground">
          <code className="text-xs">size="sm"</code> — compact, for dense toolbars.
        </TabsContent>
      </Tabs>

      <Tabs defaultValue="overview" className="w-full">
        <TabsList size="md">
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="activity">Activity</TabsTrigger>
          <TabsTrigger value="settings">Settings</TabsTrigger>
        </TabsList>
        <TabsContent value="overview" className="mt-4 text-muted-foreground">
          <code className="text-xs">size="md"</code> — the default.
        </TabsContent>
      </Tabs>
    </VStack>
  );
}

Vertical orientation

Set orientation="vertical" on the root to stack the list beside its content — the underline / active rail moves to the trigger’s trailing edge. Paired with variant="pill", this is the in-dialog settings-nav pattern (Profile / Billing / Notifications).

Name, email, and avatar.

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@vesyl/ui-next";
import { Bell, CreditCard, User } from "lucide-react";

export default function TabsVertical() {
  return (
    <Tabs defaultValue="profile" orientation="vertical" className="w-full max-w-lg gap-6">
      <TabsList variant="pill" className="w-44">
        <TabsTrigger value="profile">
          <User />
          Profile
        </TabsTrigger>
        <TabsTrigger value="billing">
          <CreditCard />
          Billing
        </TabsTrigger>
        <TabsTrigger value="notifications">
          <Bell />
          Notifications
        </TabsTrigger>
      </TabsList>
      <TabsContent value="profile" className="text-muted-foreground">
        Name, email, and avatar.
      </TabsContent>
      <TabsContent value="billing" className="text-muted-foreground">
        Payment method and invoices.
      </TabsContent>
      <TabsContent value="notifications" className="text-muted-foreground">
        Choose which emails you receive.
      </TabsContent>
    </Tabs>
  );
}

Controlled

Tabs is uncontrolled by default — give it defaultValue. To drive it yourself (e.g. to sync the active tab to the URL), pass value and onValueChange.

const [tab, setTab] = useState<"users" | "permissions">("users");

<Tabs value={tab} onValueChange={(v) => setTab(v as typeof tab)}>
  <TabsList variant="line">
    <TabsTrigger value="users">Users</TabsTrigger>
    <TabsTrigger value="permissions">Permissions</TabsTrigger>
  </TabsList>
  {/* … */}
</Tabs>;

Reference

Tabs

Root container. Extends base-ui Tabs.Root props.

Prop	Type	Default	Description
`defaultValue`	`any`	—	Initially active tab value (uncontrolled)
`value`	`any`	—	Active tab value (controlled)
`onValueChange`	`(value) => void`	—	Fires when the active tab changes
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout direction; also moves the active indicator
`className`	`string`	—	Merged onto the root

TabsList

The trigger strip. Extends base-ui Tabs.List props.

Prop	Type	Default	Description
`variant`	`"default" \| "line" \| "pill"`	`"default"`	Filled segmented control, underline, or borderless strip
`size`	`"md" \| "sm"`	`"md"`	Trigger height and text size; inherited by triggers

TabsTrigger

One tab button. Extends base-ui Tabs.Tab props.

Prop	Type	Default	Description
`value`	`any`	—	Identifies which panel this opens

TabsContent

A panel. Extends base-ui Tabs.Panel props.

Prop	Type	Default	Description
`value`	`any`	—	Matches the trigger that reveals it