Components / Tabs

Tabs

<Tabs />Stable

Switch between related views in the same place. Three variants, all token-driven: pill (default — ghost rest, secondary-fill active, sits inline), segmented (iOS-style control on a muted track with a white active card), and line (underline bar). Three sizes (sm · md · lg; the line variant runs one step larger) and a shape axis (rounded · pill). Icons use icon-body, brightening to icon-main when active or hovered; counts use a neutral-soft Badge. The active tab is inert on hover. Built on Radix Tabs.

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/upnext";

Explorer

Edit any prop in the inspector — preview and code update together. Hover any color for hex + token.

Variant

Size

Shape

Content

<Tabs defaultValue="film">
  <TabsList variant="pill" size="md" shape="rounded">
    <TabsTrigger value="film">Film</TabsTrigger>
    <TabsTrigger value="stats">…</TabsTrigger>
    <TabsTrigger value="notes">…</TabsTrigger>
  </TabsList>
</Tabs>

Inspector

Edit one prop at a time and see the token chain resolve. The preview re-renders, the code panel updates, and the resolves-to column shows every Tailwind class → CSS variable → final value.

Preview

Code

import { Tabs } from "@/components/upnext";


<Tabs />

Variants

Same Radix Tabs underneath; the visual treatment is the TabsList variant. pill mirrors the Button (ghost → secondary), segmented is the white-active control, line is the underline bar. size scales the whole row; shape switches between soft and fully-rounded corners. Hover applies to inactive tabs only — the active tab never moves under the pointer.

{/* default 'pill' — ghost at rest, SECONDARY fill when active.
   Sits inline, sized to content. The active tab is inert on hover. */}
<Tabs defaultValue="film">
  <TabsList>
    <TabsTrigger value="film">Film</TabsTrigger>
    <TabsTrigger value="stats">Stats</TabsTrigger>
    <TabsTrigger value="notes">Notes</TabsTrigger>
    <TabsTrigger value="offers" disabled>Offers</TabsTrigger>
  </TabsList>
</Tabs>

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.