Navigation

Tabs

Underline tabs with a sliding ink line, and pill tabs that work as a segmented control. Panels fade and rise in. Document tabs (`TabStrip`) close with × or Delete and leave the view to the caller.

Live example

Import

Each family is its own entry point, so a page loads only what it uses.

tsx

import { TabStrip, TabStripTab } from "@nibapp/ui/components/tab-strip";import { Tabs, TabsList, TabsPanel, TabsTab } from "@nibapp/ui/components/tabs";

Props

Each component's own props and variants, read from its source. What it also takes from an element or a Base UI part is named below its table.

TabStrip

Document tabs over one view: the browser pane's pages, the terminals, the side pane's kinds. Base UI Tabs give every strip one keyboard model: Tab reaches the selected tab, the arrow keys (and Home and End) move between tabs, Enter or Space selects one. There are no panels: the caller shows the selected tab's view. Tabs may close (`TabStripTab` `onClose`) and carry their own handlers (rename on F2 or a double click).

Prop	Type	Default	Description
value (required)	string \| null	—	The selected tab's value; `null` when none is.
onValueChange (required)	(value: string) => void	—
aria-label (required)	string	—	The strip's name for assistive technology ("Terminals", "Browser tabs").
className	string \| undefined	—
children (required)	ReactNode	—

TabStripTab

One tab: what the caller puts in it (an icon and a label, or a rename field), then its × button.

Prop	Type	Default	Description
value (required)	string	—
onClose	(() => void) \| undefined	—	Closes the tab: its ×, Delete or Backspace while the tab has focus, and a middle click.
closeLabel	string \| undefined	—	What the × does, as its tooltip ("Close Terminal 2").
className	string \| undefined	—

Also takes the props of Base UI's Tabs.Tab, except value, render, nativeButton and className.

Tabs

Root. `variant` styles every List/Tab inside it.

Prop	Type	Default	Description
variant	TabsVariant	"underline"

Also takes .

TabsList

The strip of tabs. Renders the sliding indicator automatically.

Also takes the props of Base UI's Tabs.List.

TabsPanel

Content for one tab; fades and rises in when it becomes active.

Also takes the props of Base UI's Tabs.Panel.

TabsTab

Also takes the props of Base UI's Tabs.Tab.