Components
Tabs
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
- Download the
Tabs
component - 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. MainlyTabsList
andTabsContent
.
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>