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.

as="states"

Profile panel content — name, email, avatar.

as="navigation"

Google Facebook Instagram

Component Source

// 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

Line

Google Facebook Instagram

Segmented

Google Facebook Instagram

Pills

Google Facebook Instagram

Button

Google Facebook Instagram

Component Source

<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

variant="line"

Google Facebook Instagram

variant="segmented"

Google Facebook Instagram

variant="pills"

Google Facebook Instagram

variant="button"

Google Facebook Instagram

Component Source

<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").

size="sm"

Google Facebook Instagram

size="md"

Google Facebook Instagram

Component Source

<Tabs as="navigation" variant="line" size="sm" items={NAV_LINKS} />
<Tabs as="navigation" variant="line" size="md" items={NAV_LINKS} />

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	Description
as	"states" \| "navigation"	—	Mode: "states" for in-page stateful panels (default), "navigation" for URL routing links.
variant	TabVariant	—	Visual variant: "line" (default), "segmented", "pills", or "button".
orientation	"horizontal" \| "vertical"	—	Layout orientation: "horizontal" (default) or "vertical".
size	"sm" \| "md"	—	Component size: "sm" (small) or "md" (medium, default).
value	string	—	—
defaultValue	string	—	—
onValueChange	(value: string) => void	—	—
items	readonly TabItem[]	—	List of tab items.
tabs	readonly TabItem[]	—	Alias for items when passing data-driven tabs.
linkComponent	ElementType	—	Router component for as="navigation" mode (defaults to "a").
children	ReactNode	—	—
className	string	—	—