​
Overview

Tabs is a versatile controlled component designed for creating tab-based user interfaces. This component set comprises Tabs, TabsList, TabsTrigger, and TabsContent, which work together to deliver a seamless tabbing experience.

​
Preview

Light mode

Dark mode

​
Installation

  1. Download the Tabs component
  2. Import the module
import { Tabs, TabsContent, TabsList, TabsTrigger } from './components/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-black dark:text-white">
      Make changes to your account here.
    </Text>
  </TabsContent>
  <TabsContent value="password">
    <Text className="text-black dark:text-white">
      Change your password here.
    </Text>
  </TabsContent>
</Tabs>
CardToast