Tabs

Overview

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

Preview

Preview

Light mode

Dark mode

Light mode

Dark mode

<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>

Installation

CLI

npx nativecn-ui add Tabs

npx nativecn-ui add Tabs

1. First Step

   Include Tabs.tsx in your project.

2. Second Step

   Update the import paths to match your project setup.

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>