Tabs

Organize content into switchable panels with tab navigation.

import { Tabs } from "@ninna-ui/navigation"

pnpm add @ninna-ui/navigation

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Import and use the Tabs component in your application.

import { Tabs } from "@ninna-ui/navigation";

export default function Example() {
  return (
    <Tabs defaultValue="tab1">
      <Tabs.List>
        <Tabs.Trigger value="tab1">Account</Tabs.Trigger>
        <Tabs.Trigger value="tab2">Settings</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="tab1">Account content</Tabs.Content>
      <Tabs.Content value="tab2">Settings content</Tabs.Content>
    </Tabs>
  );
}

Basic

A basic tab group with content panels.

Manage your account settings and preferences.

Variants

Tabs supports line, enclosed, soft, and outline visual styles.

line

Account content for line variant.

enclosed

Account content for enclosed variant.

soft

Account content for soft variant.

outline

Account content for outline variant.

Sizes

Tabs come in sm, md, and lg sizes.

Size: sm

Size: md

Size: lg

Disabled

Individual tabs can be disabled to prevent interaction.

First tab content.

Vertical

Tabs can be oriented vertically for sidebar-style navigation.

General settings panel.

API Reference

Complete list of props for the Tabs component and its sub-components.

Tabs (Root)

Prop	Type	Default	Description
`value`	`string`	-	Controlled active tab value
`defaultValue`	`string`	-	Default active tab value (uncontrolled)
`onValueChange`	`(value: string) => void`	-	Callback when active tab changes
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Orientation of the tabs
`activationMode`	`'automatic' \| 'manual'`	`'automatic'`	Whether keyboard activation is automatic
`className`	`string`	-	Additional CSS classes

Tabs.List

Prop	Type	Default	Description
`variant`	`'line' \| 'enclosed' \| 'soft' \| 'outline'`	`'line'`	Visual style variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the tab triggers
`loop`	`boolean`	`true`	Whether to loop keyboard navigation

Tabs.Trigger

Prop	Type	Default	Description
`value*`	`string`	-	Value that associates the trigger with a content panel
`disabled`	`boolean`	`false`	Whether the trigger is disabled

Tabs.Content

Prop	Type	Default	Description
`value*`	`string`	-	Value that associates the content with a trigger
`forceMount`	`true`	-	Whether to force mount the content (keeps DOM alive)

Accessibility

Uses role="tablist", role="tab", and role="tabpanel"
Arrow keys navigate between tabs
Home and End keys jump to first/last tab
Disabled tabs are skipped during keyboard navigation
Each tab panel is associated with its trigger via aria-controls
Supports both automatic and manual activation modes