Tabs

"use client";import {  Tabs,  TabsContent,  TabsList,  TabsTrigger,} from "@/registry/okibi/ui/tabs";export default function TabsDemo() {  return (    <Tabs defaultValue="status" className="w-80 max-w-full">      <TabsList>        <TabsTrigger value="status">Status</TabsTrigger>        <TabsTrigger value="signal">Signal</TabsTrigger>        <TabsTrigger value="logs">Logs</TabsTrigger>      </TabsList>      <TabsContent value="status" className="text-sm text-muted-foreground">        All nodes nominal. Subnet load within tolerance.      </TabsContent>      <TabsContent value="signal" className="text-sm text-muted-foreground">        Uplink locked at 98% strength on band Charlie.      </TabsContent>      <TabsContent value="logs" className="text-sm text-muted-foreground">        No intrusions recorded in the last cycle.      </TabsContent>    </Tabs>  );}

Installation

npm install @radix-ui/react-tabs

Usage

import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs"

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="telemetry">Telemetry</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Overview panel…</TabsContent>
  <TabsContent value="telemetry">Telemetry panel…</TabsContent>
</Tabs>

Anatomy

<Tabs defaultValue="a">      {/* root; pairs triggers to panels by value */}
  <TabsList>                 {/* the bordered segmented strip */}
    <TabsTrigger value="a" />
    <TabsTrigger value="b" />
  </TabsList>
  <TabsContent value="a" />  {/* one panel per trigger value */}
  <TabsContent value="b" />
</Tabs>

Accessibility

• Wraps Radix Tabs, which supplies the tablist/tab/tabpanel roles and roving-tabindex keyboard model out of the box.
• Arrow keys move between triggers and activate the panel; Home/End jump to the first/last tab — all handled by the primitive.
• Triggers and the active panel carry the standard square signal focus ring (ring-2 ring-ring with offset), so focus is always visible.
• disabled triggers are skipped by keyboard navigation and dimmed to opacity-60; the active tab snaps to a solid bg-primary fill (accent-as-fill, no spark-on-spark text).
• Inactive panels are unmounted by Radix, so there is no enter animation to replay on switch — content snaps in for an instant segmented-control feel.

Guidelines

Do

• Match every TabsTrigger value to exactly one TabsContent value so panels resolve correctly.
• Keep trigger labels short — the list is w-fit and triggers split by hairline rules, so a few uppercase words read best.
• Wrap an overflowing list in a ScrollArea (or let it wrap) when you have many triggers.

Don't

• Do not stuff a long row of triggers into the bare list — it is inline-flex w-fit with no built-in wrap or scroll affordance.
• Do not re-add a panel enter animation; it replays on every switch and reads as load lag.
• Do not rely on orientation='vertical' for styling — the divider rules are tuned for the horizontal strip.