​
Overview

A set of layered sections of content —known as tab panels— that are displayed one at a time.

​
Preview

Light mode

Dark mode

​
Installation

npx nativecn-ui add Tabs

​
Components

​
Tabs

The parent container for the tabbing system.
  • defaultValue: string - The value of the tab that should be active when initially rendered.
  • children - Components to be rendered inside the Tabs container. Mainly TabsList and TabsContent.

​
TabsList

The container for individual tab triggers.
  • children - TabsTrigger components.

​
TabsTrigger

Triggers or buttons for each tab. Should be placed inside TabsList.
  • id: string - A unique identifier for the tab.
  • title: string - The label displayed on the tab trigger.

​
TabsContent

Container for the content of each tab.
  • value: string - A unique value that associates the content with a trigger.
  • children - The content to display when the tab is active.

​
Usage

​
Basic usage

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger id="account" title="Account" />
    <TabsTrigger id="password" title="Password" />
  </TabsList>
  <TabsContent value="account">
    <Text className="text-primary">Make changes to your account here.</Text>
  </TabsContent>
  <TabsContent value="password">
    <Text className="text-primary">Change your password here.</Text>
  </TabsContent>
</Tabs>