Tabs

The Tabs component provides a tabbed interface for organizing and switching between different views. Built on Radix UI primitives.

Import

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@nqlib/nqui';

Basic Usage

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@nqlib/nqui';

export default function Example() {
  return (
    <Tabs defaultValue="account">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">Account content</TabsContent>
      <TabsContent value="password">Password content</TabsContent>
    </Tabs>
  );
}

Examples

Basic Tabs

Make changes to your account here.

Line Variant

Account content

Variants

default - Default tab style with background
line - Line variant with underline indicator

Props

Tabs

Prop	Type	Default	Description
`value`	`string`	-	Controlled active tab value
`defaultValue`	`string`	-	Uncontrolled default active tab
`onValueChange`	`(value: string) => void`	-	Callback when tab changes
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Tab layout direction
`className`	`string`	-	Additional CSS classes
All standard `div` props	-	-	Accepts HTML div attributes

TabsList

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	from Tabs	Override list orientation
`className`	`string`	-	Additional CSS classes
All standard `div` props	-	-	Accepts HTML div attributes

TabsTrigger

Prop	Type	Default	Description
`value`	`string`	-	Tab value (must match TabsContent)
`disabled`	`boolean`	`false`	Whether the trigger is disabled
`className`	`string`	-	Additional CSS classes
All standard `button` props	-	-	Accepts HTML button attributes

TabsContent

Prop	Type	Default	Description
`value`	`string`	-	Tab value (must match TabsTrigger)
`forceMount`	`boolean`	-	Force mount when inactive
`className`	`string`	-	Additional CSS classes
All standard `div` props	-	-	Accepts HTML div attributes

Accessibility

Full keyboard navigation
ARIA attributes
Focus management

Next Steps

Learn about Navigation Components for other navigation elements