Tabs
Tabbed navigation and in-page state container built on Radix Tabs primitive supporting line, segmented, pills, and button variants.
// Radix — @radix-ui/react-tabs
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@shavin/ui";Types - as states | navigation
as="states" (default) controls in-page stateful panels backed by Radix Tabs. as="navigation" renders hyperlink navigation tabs for route switching.
// 1. Stateful Panels (as="states", default)
const STATEFUL_TABS = [
{ value: "profile", label: "Profile", content: <p>Profile content…</p> },
{ value: "settings", label: "Settings", content: <p>Settings content…</p> },
{ value: "backup", label: "Backup", content: <p>Backup content…</p> },
];
<Tabs as="states" items={STATEFUL_TABS} />
// 2. URL Navigation (as="navigation")
const NAV_LINKS = [
{ href: "https://google.com", label: "Google", external: true },
{ href: "https://facebook.com", label: "Facebook", external: true },
{ href: "https://instagram.com", label: "Instagram", external: true },
];
<Tabs as="navigation" items={NAV_LINKS} />Variants — Horizontal
Horizontal layout variants shown using Navigation mode for clean alignment.
Line, Segmented, Pills & Button
<Tabs as="navigation" variant="line" items={NAV_LINKS} />
<Tabs as="navigation" variant="segmented" items={NAV_LINKS} />
<Tabs as="navigation" variant="pills" items={NAV_LINKS} />
<Tabs as="navigation" variant="button" items={NAV_LINKS} />Variants — Vertical
Vertical orientation tab tracks for sidebars or multi-tier navigation.
Vertical Orientations
<Tabs as="navigation" orientation="vertical" variant="line" items={NAV_LINKS} />
<Tabs as="navigation" orientation="vertical" variant="segmented" items={NAV_LINKS} />
<Tabs as="navigation" orientation="vertical" variant="pills" items={NAV_LINKS} />
<Tabs as="navigation" orientation="vertical" variant="button" items={NAV_LINKS} />Sizes - sm | md
Adjust tab typography and padding via the size prop (size="sm" vs size="md").
Props
SegmentedControl vs. Tabs (variant="segmented"): SegmentedControl is a standalone toggle for view modes, density controls, or filters without content panels. Tabs structures in-page content panels or URL page navigation.
| Prop | Type | Default |
|---|---|---|
| as | "states" | "navigation" | — |
| variant | TabVariant | — |
| orientation | "horizontal" | "vertical" | — |
| size | "sm" | "md" | — |
| value | string | — |
| defaultValue | string | — |
| onValueChange | (value: string) => void | — |
| items | readonly TabItem[] | — |
| tabs | readonly TabItem[] | — |
| linkComponent | ElementType | — |
| children | ReactNode | — |
| className | string | — |