Tabs

Overview

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

Preview

• Preview
• Code

Light mode

Dark mode

Installation

• CLI
• Manual

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>