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.


Light mode

Dark mode


  1. Download the Tabs component
  2. Import the module
import { Tabs, TabsContent, TabsList, TabsTrigger } from './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.


The container for individual tab triggers.

  • children - TabsTrigger components.


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.


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.


Basic usage

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