navigation

Tabs

Panels behind a roving-focus tablist, in automatic or manual activation and either orientation.

Variants

One Tab stop reaches the strip; arrow keys move along it. Switch to `activationMode="manual"` when a panel fetches on mount.

The line variant.

The solid variant.

The pill variant.

Vertical

Up and Down replace Left and Right; the roving focus follows the orientation.

Workspace name, slug and default region.

Own the source

Noksha ships as a package and as copy-paste source. Take the files and they are yours to change. These are read from the generated registry, so they are exactly what the library ships — never a paraphrase of it.

Self-contained apart from @noksha-ui/core. Or let the CLI do it: npx @noksha-ui/cli add tabs writes them, follows the same dependency graph, and fixes up the imports.

export { Tabs, TabsContent, TabsList, TabsRoot, TabsTrigger, tabsVariants } from './tabs.js';
export type {
  TabsContentProps,
  TabsListProps,
  TabsOrientation,
  TabsProps,
  TabsSize,
  TabsTriggerProps,
  TabsVariant,
} from './tabs.types.js';

API reference

Accepted values

TabsVariant: linesolidpill
TabsSize: smmdlg
TabsOrientation: horizontalvertical

TabsProps

Also accepts everything from Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>.

Prop	Type	Description
value	string	—
defaultValue	string	—
onValueChange	(value: string) => void	—
orientation	TabsOrientation	—
variant	TabsVariant	—
size	TabsSize	—
activationMode	'automatic' \| 'manual'	`automatic` selects a tab as soon as it is focused; `manual` waits for Enter or Space. Automatic is the default because it is what the WAI-ARIA pattern recommends for panels that are cheap to show. Switch to manual when a panel fetches on mount, or arrowing across the strip fires a request per tab.

TabsListProps

Also accepts everything from React.HTMLAttributes<HTMLDivElement>.

Prop	Type	Description
fitted	boolean	Stretch the tabs to fill the row.

TabsTriggerProps

Also accepts everything from React.ButtonHTMLAttributes<HTMLButtonElement>.

Prop	Type	Description
value*	string	—

TabsContentProps