Components

Tabs

Tabs on Base UI: 3px ink rule on the selected tab, big ModeSwitcher variant, no hover.

The committee reviewed 14 submissions and recommended 3.

Install

bash

npx shadcn add @eloquent/tabs

Usage

tsx

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

<Tabs defaultValue="summary">
  <TabsList aria-label="Sections of the report">
    <TabsTrigger value="summary">Summary</TabsTrigger>
    <TabsTrigger value="findings">Findings</TabsTrigger>
  </TabsList>
  <TabsContent value="summary">The committee reviewed 14 submissions.</TabsContent>
  <TabsContent value="findings">Two procedures lacked a signed record.</TabsContent>
</Tabs>

Use <TabsList variant="big"> for the ModeSwitcher style, orientation="vertical" on Tabs for a side list, and activateOnFocus on TabsList to select as the arrows move.

States

Line · selected, focus on Tab, disabled

Selected panel.

Big · ModeSwitcher style

Read mode.

Vertical

First panel.

State	Treatment
Selected	3px ink rule (`line`) or solid ink fill (`big`), plus `aria-selected`
Hover	None
Pressed	Ink fill with paper text
Focus	2px ink outline, 2px offset
Disabled	Halftone text, `cursor-not-allowed`

Keyboard

Key	Action
Tab / Shift+Tab	Move into the tab list (one stop), then into the active panel
Arrow Left / Right	Move focus to the previous or next tab (Up / Down when vertical); wraps
Home / End	Move focus to the first or last tab
Enter / Space	Select the focused tab (arrows select instead with `activateOnFocus`)

Vietnamese

Hội đồng đã xem xét 14 hồ sơ và đề xuất 3 hồ sơ.

Ink adaptation

Upstream draws a muted pill list with a shadowed active tab. Here the list is a hairline and the selected tab carries a 3px ink rule; the selection is also stated by aria-selected, never by colour. The big variant is the ModeSwitcher: Barlow Condensed capitals with a solid ink fill on the selected tab. No radius, no shadow and no hover. Built on Base UI Tabs.