Tabs

Preview

Installation

Packages are unreleased. Follow the packed artifact setup for package mode, or run the local CLI in copy mode and complete the reported npm, token CSS, and Tailwind setup.

pnpm exec ui add tabs

Usage

This example uses package mode. In copy mode, import the generated component from your project and complete the manual setup steps in the installation guide.

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@nimjs/ui';

export function Example() {
  return (
    <Tabs defaultValue="overview">
      <TabsList aria-label="Project views">
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="activity">Activity</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">Project summary</TabsContent>
      <TabsContent value="activity">Recent changes</TabsContent>
    </Tabs>
  );
}

System metadata

API and states

Use value and onValueChange for controlled selection, or defaultValue for uncontrolled selection. Disable individual triggers with disabled; orientation supports horizontal and vertical layouts.

Accessibility

Give TabsList an accessible name. Arrow keys move focus and select a tab; Home and End move to the first and last enabled tabs. Direction is respected in RTL horizontal lists.