Tabs

Compound component built on Base UI Tabs. Two variants: underline (default) draws a single sliding underline via Base UI's Tabs.Indicator; pill gives the active tab a filled, rounded background. The pill variant works in both orientations, so one component can render a vertical sidebar on desktop and a horizontal strip on mobile.

$npx shadcn add @patchui/tabs

Underline (default)

A high-level summary lives here.

Pill - same look, orientation flips by breakpoint

Desktop (vertical)

Mobile (horizontal)

Usage

import { Tabs, TabsList, TabsTrigger, TabsPanel } from "@patchui/react";
 
// Content tabs (underline)
<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  <TabsPanel value="overview">...</TabsPanel>
  <TabsPanel value="settings">...</TabsPanel>
</Tabs>
 
// Nav-style, responsive: vertical pill on desktop, horizontal on mobile
<Tabs variant="pill" orientation="vertical" defaultValue="profile">
  <TabsList>
    <TabsTrigger value="profile">Profile</TabsTrigger>
    <TabsTrigger value="billing">Billing</TabsTrigger>
  </TabsList>
</Tabs>

Props

Tabs

Prop	Type	Default	Description
variant	"underline" \| "pill"	"underline"	underline draws a sliding indicator (content tabs); pill gives the active tab a filled rounded background (nav-style tabs).
orientation	"horizontal" \| "vertical"	"horizontal"	Layout direction. The pill variant is designed to look consistent in both orientations.
defaultValue	string	-	Initially-selected tab value (uncontrolled).
value	string	-	Selected tab value (controlled).
onValueChange	(value: string) => void	-	Callback fired when the selected tab changes.

Components

Tabs - root; accepts variant, orientation, defaultValue or controlled value/onValueChange
TabsList - container for triggers; renders the sliding indicator for the underline variant
TabsTrigger - individual tab; styled per the active variant
TabsPanel - matched panel for a trigger value

Notes

Underline vs pill: Use underline for switching content panels; use pill for navigation-style tabs (e.g. settings sections) where a filled active state reads better.
Responsive nav: With variant="pill", render orientation="vertical" on larger screens and horizontal on small screens to get a consistent look across breakpoints from one component.
Keyboard: Triggers are arrow-key navigable (Base UI) and show the standard focus outline.