ui/components/tabs

Tabs

Terminal-styled tabbed interface with horizontal and vertical orientation support.

Preview

tsx

1 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";2 3 export default function TabsDefault() {4   return (5     <Tabs defaultValue="preview">6       <TabsList>7         <TabsTrigger value="preview">Preview</TabsTrigger>8         <TabsTrigger value="code">Code</TabsTrigger>9         <TabsTrigger value="tests">Tests</TabsTrigger>10       </TabsList>11       <TabsContent value="preview">12         <div className="border border-border p-4 text-sm">13           Live preview of the component renders here.14         </div>15       </TabsContent>16       <TabsContent value="code">17         <div className="border border-border p-4 text-sm font-mono text-muted-foreground">18           Source code displayed here with syntax highlighting.19         </div>20       </TabsContent>21       <TabsContent value="tests">22         <div className="border border-border p-4 text-sm text-success">All 12 tests passing.</div>23       </TabsContent>24     </Tabs>25   );26 }27

Installation

$pnpm exec dgadd add ui/tabs

[Installs to]src/components/ui/tabs[Item]ui/tabs

dgadd is not public on npm yet. Until the first release, pack @diffgazer/add from the repository and install that tarball into this app, which is what puts dgadd on pnpm exec.

UI components require Tailwind CSS v4. Local copy mode imports src/styles/styles.css; package mode uses @diffgazer/ui CSS once packages are available.

Usage

tsx

1 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";2 3 export default function TabsDefault() {4   return (5     <Tabs defaultValue="preview">6       <TabsList>7         <TabsTrigger value="preview">Preview</TabsTrigger>8         <TabsTrigger value="code">Code</TabsTrigger>9         <TabsTrigger value="tests">Tests</TabsTrigger>10       </TabsList>11       <TabsContent value="preview">12         <div className="border border-border p-4 text-sm">13           Live preview of the component renders here.14         </div>15       </TabsContent>16       <TabsContent value="code">17         <div className="border border-border p-4 text-sm font-mono text-muted-foreground">18           Source code displayed here with syntax highlighting.19         </div>20       </TabsContent>21       <TabsContent value="tests">22         <div className="border border-border p-4 text-sm text-success">All 12 tests passing.</div>23       </TabsContent>24     </Tabs>25   );26 }27

Examples

Trigger Variants

Preview

tsx

1 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";2 3 // bracket first: [ label ] is the library's signature trigger treatment.4 const VARIANTS = [5   { value: "bracket", note: "Signature — markers appear on the active trigger." },6   { value: "default", note: "Boxed triggers; active inverts to the primary fill." },7   { value: "pill", note: "Sliding indicator inside an inset track." },8   { value: "underline", note: "Hairline row with a sliding underline." },9 ] as const;10 11 const TABS = ["Diff", "Findings", "Log"] as const;12 13 export default function TabsVariants() {14   return (15     <div className="flex flex-col gap-6">16       {VARIANTS.map(({ value, note }) => (17         <div key={value} className="flex flex-col gap-2">18           <span className="font-mono text-2xs uppercase tracking-widest text-muted-foreground">19             {value}20           </span>21           <Tabs defaultValue="Diff" variant={value}>22             <TabsList aria-label={`${value} tabs`}>23               {TABS.map((tab) => (24                 <TabsTrigger key={tab} value={tab}>25                   {tab}26                 </TabsTrigger>27               ))}28             </TabsList>29             <TabsContent value="Diff">30               <p className="text-xs text-muted-foreground">{note}</p>31             </TabsContent>32             <TabsContent value="Findings">33               <p className="text-xs text-muted-foreground">Findings panel</p>34             </TabsContent>35             <TabsContent value="Log">36               <p className="text-xs text-muted-foreground">Log panel</p>37             </TabsContent>38           </Tabs>39         </div>40       ))}41     </div>42   );43 }44

Vertical Orientation

Preview

tsx

1 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";2 3 export default function TabsVertical() {4   return (5     <Tabs defaultValue="general" orientation="vertical">6       <div className="flex gap-4">7         <TabsList className="w-40 shrink-0">8           <TabsTrigger value="general">General</TabsTrigger>9           <TabsTrigger value="editor">Editor</TabsTrigger>10           <TabsTrigger value="keys">API Keys</TabsTrigger>11         </TabsList>12         <div className="flex-1">13           <TabsContent value="general" className="mt-0">14             <div className="border border-border p-4 text-sm">15               General settings: theme, language, notifications.16             </div>17           </TabsContent>18           <TabsContent value="editor" className="mt-0">19             <div className="border border-border p-4 text-sm">20               Editor preferences: font size, tab width, line numbers.21             </div>22           </TabsContent>23           <TabsContent value="keys" className="mt-0">24             <div className="border border-border p-4 text-sm">25               Manage your API keys for AI providers.26             </div>27           </TabsContent>28         </div>29       </div>30     </Tabs>31   );32 }33

Controlled with Disabled Tab

Preview

tsx

1 "use client";2 3 import { useState } from "react";4 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";5 6 export default function TabsControlled() {7   const [tab, setTab] = useState("output");8   return (9     <div className="flex flex-col gap-2">10       <div className="text-xs text-muted-foreground">11         Active tab: <span className="text-foreground font-bold">{tab}</span>12       </div>13       <Tabs value={tab} onChange={setTab}>14         <TabsList>15           <TabsTrigger value="output">Output</TabsTrigger>16           <TabsTrigger value="errors">Errors</TabsTrigger>17           <TabsTrigger value="debug" disabled>18             Debug19           </TabsTrigger>20         </TabsList>21         <TabsContent value="output">22           <div className="border border-border p-4 text-sm font-mono">Build completed in 2.3s</div>23         </TabsContent>24         <TabsContent value="errors">25           <div className="border border-border p-4 text-sm text-error">No errors found.</div>26         </TabsContent>27       </Tabs>28     </div>29   );30 }31

Keyboard Navigation

Preview

tsx

1 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";2 3 const sections = [4   { value: "overview", label: "Overview", content: "System health: all services operational." },5   { value: "metrics", label: "Metrics", content: "CPU: 42% | Memory: 3.2GB / 8GB | Disk: 67%" },6   {7     value: "logs",8     label: "Logs",9     content: "[12:01] INFO Request handled in 23ms\n[12:02] WARN Connection pool at 80%",10   },11   { value: "alerts", label: "Alerts", content: "1 active alert: disk usage above threshold." },12 ];13 14 export default function TabsKeyboard() {15   return (16     // bracket variant here so manual activation is demonstrated on a second17     // trigger style rather than repeating the hero's underline row.18     <Tabs defaultValue="overview" variant="bracket" activationMode="manual">19       <TabsList>20         {sections.map((section) => (21           <TabsTrigger key={section.value} value={section.value}>22             {section.label}23           </TabsTrigger>24         ))}25       </TabsList>26       {sections.map((section) => (27         <TabsContent key={section.value} value={section.value}>28           <div className="border border-border p-4 text-sm font-mono text-muted-foreground">29             {section.content}30           </div>31         </TabsContent>32       ))}33     </Tabs>34   );35 }36

Wrapped Reflow

Preview

tsx

1 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";2 3 const tabs = [4   ["overview", "Project overview"],5   ["review", "Review configuration"],6   ["permissions", "Repository permissions"],7   ["notifications", "Notification settings"],8 ] as const;9 10 function WrappedTabs({ variant }: { variant: "pill" | "underline" }) {11   return (12     // max-w-[26rem] fits two or three triggers per row, so the reflow reads as13     // wrapping rather than as a broken vertical stack.14     <Tabs defaultValue="overview" variant={variant} className="w-full max-w-[26rem]">15       <TabsList aria-label={`Wrapped ${variant} tabs`} className="w-full">16         {tabs.map(([value, title]) => (17           <TabsTrigger key={value} value={value}>18             {title}19           </TabsTrigger>20         ))}21       </TabsList>22       {tabs.map(([value, title]) => (23         <TabsContent key={value} value={value} className="pt-3 text-sm">24           {title} panel25         </TabsContent>26       ))}27     </Tabs>28   );29 }30 31 export default function TabsReflowExample() {32   return (33     <div className="grid w-full gap-6">34       {(["pill", "underline"] as const).map((variant) => (35         <div key={variant} className="flex flex-col gap-2">36           <span className="font-mono text-2xs uppercase tracking-widest text-muted-foreground">37             {variant}38           </span>39           <WrappedTabs variant={variant} />40         </div>41       ))}42     </div>43   );44 }45

API Reference

Tabs

Name	Type	Default	Description
value	string	—	Controlled active tab value. Pair with onChange.
defaultValue	string	—	Initial active tab value for uncontrolled mode. Defaults to the first enabled Trigger.
onChange	(value: string) => void	—	Fired when the active tab changes.
orientation	"horizontal" \| "vertical"	"horizontal"	Tab list axis. Switches arrow-key navigation direction and aria-orientation.
variant	"default" \| "bracket" \| "pill" \| "underline"	"underline"	Visual style applied to triggers and the list.
size	"sm" \| "md"	"sm"	Size variant / trigger density token. "sm" is 36px, rising to a 44px target on coarse pointers; "md" is always a 44px target.
activationMode	"automatic" \| "manual"	"automatic"	Automatic activates on focus; manual requires Enter or Space.
childrenrequired	ReactNode	—	Tabs.List and Tabs.Content subparts.

Tabs.List

Name	Type	Default	Description
wrap	boolean	true	Allows horizontal triggers and label text to wrap within the available width. Vertical lists ignore this option.
loop	boolean	true	When true, arrow navigation wraps from last to first trigger and vice versa.
onNavigationBoundaryReached	(direction: "previous" \| "next", event: KeyboardEvent, key: string) => void	—	Fired when arrow navigation reaches the first/last trigger with loop disabled.
children	ReactNode	—	Tabs.Trigger children.

Tabs.Trigger

Name	Type	Default	Description
valuerequired	string	—	Stable identifier matched against Tabs value and the paired Tabs.Content.
disabled	boolean	false	Disables activation and removes the trigger from arrow navigation.
children	ReactNode	—	Trigger label.

Tabs.Content

Name	Type	Default	Description
valuerequired	string	—	Stable identifier paired with the matching Tabs.Trigger.
children	ReactNode	—	Panel content. Hidden when its trigger is not active.

Data attributes

Attribute	Applies to	Values	Description
data-state	Tabs.Trigger / Tabs.Content	"active" \| "inactive"	Active tab/panel state for styling and visibility.
data-orientation	Tabs.List	"horizontal" \| "vertical"	Keyboard/navigation axis.
data-value	Tabs.Trigger / Tabs.Content	tab value	Stable value pairing triggers and panels.
data-variant	Tabs.List / Tabs.Trigger	"default" \| "bracket" \| "pill" \| "underline"	Visual variant propagated to list and triggers.
data-wrap	Tabs.List / Tabs.Trigger	"true" \| "false"	Whether the horizontal list uses wrapped, row-local active treatments.

Accessibility

Keyboard Navigation

TabsList has built-in keyboard navigation via @diffgazer/keys. ArrowLeft/ArrowRight (horizontal) or ArrowUp/ArrowDown (vertical) navigate between tabs. Home/End jump to first/last tab. Enter/Space activate the focused tab. With loop disabled, arrow navigation stops at the edges and fires onNavigationBoundaryReached for composite focus handoff.

Key	Action
ArrowLeft / ArrowRight	Moves focus across horizontal tab triggers.
ArrowUp / ArrowDown	Moves focus across vertical tab triggers.
Home / End	Moves focus to the first or last enabled trigger.
Enter / Space	Activates the focused tab in manual mode.

Keyboard Navigation

Preview

tsx

1 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";2 3 const sections = [4   { value: "overview", label: "Overview", content: "System health: all services operational." },5   { value: "metrics", label: "Metrics", content: "CPU: 42% | Memory: 3.2GB / 8GB | Disk: 67%" },6   {7     value: "logs",8     label: "Logs",9     content: "[12:01] INFO Request handled in 23ms\n[12:02] WARN Connection pool at 80%",10   },11   { value: "alerts", label: "Alerts", content: "1 active alert: disk usage above threshold." },12 ];13 14 export default function TabsKeyboard() {15   return (16     // bracket variant here so manual activation is demonstrated on a second17     // trigger style rather than repeating the hero's underline row.18     <Tabs defaultValue="overview" variant="bracket" activationMode="manual">19       <TabsList>20         {sections.map((section) => (21           <TabsTrigger key={section.value} value={section.value}>22             {section.label}23           </TabsTrigger>24         ))}25       </TabsList>26       {sections.map((section) => (27         <TabsContent key={section.value} value={section.value}>28           <div className="border border-border p-4 text-sm font-mono text-muted-foreground">29             {section.content}30           </div>31         </TabsContent>32       ))}33     </Tabs>34   );35 }36

Notes

Requires @diffgazer/keys (package mode)

TabsList's arrow-key navigation imports from the required @diffgazer/keys peer. Package consumers must install @diffgazer/keys with @diffgazer/ui; packages are not yet published to npm, so until the first release install both from locally packed tarballs. Importing @diffgazer/ui/components/tabs without keys fails at module load with an error naming the missing @diffgazer/keys package. Copy/dgadd consumers do not need the package — copy mode rewrites the keyboard hooks to local source.

Composition Contract

Use Tabs.List, Tabs.Trigger, and Tabs.Content as explicit children in the Tabs JSX tree. Custom tab visuals belong inside Tabs.Trigger. Components that create triggers internally from an opaque wrapper are not part of the current public contract.

Orientation Support

Tabs default to horizontal orientation. Set orientation='vertical' to stack triggers vertically. Keyboard arrow directions automatically align with the orientation.

Horizontal reflow

Horizontal Tabs.List wraps triggers and label text by default so constrained layouts do not create page-level horizontal scrolling. Pill and underline variants use a selected treatment on each trigger when rows wrap. Set wrap={false} only when a single-row layout is guaranteed.

Panel ownership

Tabs.Content owns its DOM id and hidden state so the matching trigger's aria-controls reference and inactive-panel visibility stay synchronized. Pair triggers and panels with value instead of overriding id or hidden.

Tab list semantics

Tabs.List owns its tablist role, orientation, variant, and wrapping state. Native attributes can label or describe the list but cannot replace those compound-component invariants.

Source

Install via CLI: pnpm exec dgadd add ui/tabs. Keyboard hooks are included as standalone copies. For the full experience, use --integration keys.

Highlighted source loads after this disclosure opens. Browse the source repository.

Tabs

Installation

Usage

Examples

Trigger Variants

Vertical Orientation

Controlled with Disabled Tab

Keyboard Navigation

Wrapped Reflow

API Reference

Tabs

Tabs.List

Tabs.Trigger

Tabs.Content

Data attributes

Accessibility

Keyboard Navigation

Keyboard Navigation

Notes

Requires @diffgazer/keys (package mode)

Composition Contract

Orientation Support

Horizontal reflow

Panel ownership

Tab list semantics

Source

View component source (29 files)