ComponentsNavigation

Tabs

Switch between views of the same context — a record's sections, status filters, a List/Grid switch. Three variants, vertical orientation, counts, scrolling overflow, and route-based link tabs.

Radix Tabs components/tabs.tsx, lib/use-edge-fade.ts, styles/navigation.csstheme · material · accent · density · font
  • Today, 09:42Call with Laura Callahan — renewal scope agreed
  • YesterdayProposal v3 sent to procurement
  • Nov 4Meeting: quarterly business review

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@vamos-ui/react";

<Tabs defaultValue="overview">
  <TabsList aria-label="Contact">
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="deals" count={4}>Deals</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">…</TabsContent>
  <TabsContent value="deals">…</TabsContent>
</Tabs>

Inactive panels unmount, so state inside them resets — lift it up or use forceMount.

A "More ▾" overflow menu is planned; today overflow scrolls.

Examples

Variants

underline for pages and records, pill for status filters, segmented for a 2–4 option view switch.

With counts

count is locale-formatted and capped at 99+. It is part of the accessible name ("Draft, 12"). The selected pill tints its count with the accent.

Segmented view switch

Controlled with value / onValueChange. For a value picker inside a form use a radio group instead — tabs switch views.

Media library

  • Hero — autumn campaign.jpg2400 × 1350 · 1.8 MB
  • Team offsite.jpg1600 × 1067 · 940 KB
  • Store front, Kadıköy.jpg1920 × 1280 · 1.2 MB
  • Product flat lay.jpg2000 × 2000 · 2.1 MB

Vertical (settings)

orientation="vertical" moves the indicator to the start edge; ↑ ↓ move between tabs.

Two-factor authentication

Enabled with an authenticator app since March 2026. 6 recovery codes left.

Synced with the URL

URL state stays in your app. Read ?tab= on load and replace it on change.

The address bar now ends in ?tab=overview — reload and the tab is kept.

Overflow

Tabs that don't fit scroll horizontally with edge fades, and the selected tab is scrolled into view.

API

Tabs

PropTypeDefault
value
Controlled selected tab.
string—
defaultValue
Initial tab when uncontrolled.
string—
onValueChange
Called when the selection changes.
(value: string) => void—
orientation
Vertical puts the list beside the panels and switches arrow keys to ↑ ↓.
"horizontal" | "vertical""horizontal"
activationMode
manual: arrows only move focus; Enter / Space selects (heavy panels).
"automatic" | "manual""automatic"
dir
Reading direction; defaults to the LocaleProvider direction.
"ltr" | "rtl"—

TabsList

PropTypeDefault
variant
Visual style.
"underline" | "pill" | "segmented""underline"
size
Trigger height and text size; segmented follows --control-h.
"sm" | "md""md"
fill
Equal-width tabs that fill the row.
booleanfalse
overflow
Horizontal lists scroll with edge fades and keep the selected tab in view.
"scroll" | "none""scroll"
loop
Arrow keys wrap around.
booleantrue

TabsTrigger

PropTypeDefault
value
Required. Matches a TabsContent.
string—
icon
Leading icon.
ReactNode—
count
Trailing count badge (locale-formatted, 99+).
number—
badgeTone
Tone of the count badge (selected pill / segmented tabs use accent).
BadgeProps["tone"]"neutral"
disabled
Skipped by the keyboard.
booleanfalse

TabsContent

PropTypeDefault
value
Required. The tab this panel belongs to.
string—
forceMount
Keep the panel mounted while inactive (inactive panels unmount by default).
true—

TabsLinkList / TabsLink

PropTypeDefault
aria-label
TabsLinkList: name of the nav landmark.
string—
variant · size · fill · orientation · overflow
TabsLinkList: same as TabsList.
——
href
TabsLink: target; rendered with the app's router Link.
string—
exact
TabsLink: active only on this exact path (index routes).
booleanfalse
active
TabsLink: force the active state instead of deriving it from currentPath.
boolean—
icon · count · badgeTone · disabled
TabsLink: same as TabsTrigger.
——
Previous
Table
Next
Tag input