Tabs

A series of layered content sections, called tab panels, that are shown one at a time.

Preview
Code

Tab1
Tab2
Tab3

TabContent1

Installation

npm
yarn
pnpm
bun

npm i @melio-ui/tabs

If @melio-ui/react is already installed globally, you can skip this step.

Import

Individual
Global

import { 
  TabsRoot,
  TabsList,
  TabsTab,
  TabsContent,
} from '@melio-ui/tabs';

TabsRoot: All parts of the tabs are included.
TabsList: Contains the buttons or tabs aligned with the edge of the active content.
TabsTab: This button activates related content.
TabsContent: Includes content related to each tab.

Another way to import

'use client';

import { Tabs } from '@melio-ui/tabs';

<Tabs.Root>
  <Tabs.List>
    <Tabs.Tab>Tab1</Tabs.Tab>
    <Tabs.Tab>Tab2</Tabs.Tab>
  </Tabs.List>
  <Tabs.Content>
    <p>TabContent1</p>
  </Tabs.Content>
  <Tabs.Content>
    <p>TabContent2</p>
  </Tabs.Content>
</Tabs.Root>;

'use client' must be used when rendering on the server side.

API Reference

TabsRoot

All parts of the tabs are included.

Prop	Type	Default	Description
value	`string`	-	The value of the activated tab content.
defaultValue	`string`	-	The initial value of the activated tab content.
orientation	`TypeAttributes.Orientation "horizontal" \| "vertical"`	-	Direction for the placement of the Tabs component.
renderMode	`"selecting" \| "selected" \| "force"`	"selecting"	How to render tab content. selecting: Rendering only the currently activated tab content. selected: Rendering tab contents that have been activated. force: Rendering all tab contents.
onValueChange	`(value: string) => void`	-	The callback invoked when a tab content is activated.

Data attribute	Values
[data-orientation]	"horizontal" \| "vertical"

TabsList

Contains the buttons or tabs aligned with the edge of the active content.

TabsTab

This button activates related content.

Prop	Type	Default	Description
value	`string`	-	The value of the tab.
disabled	`boolean`	-	Determines whether the tab is inactive.

Data attribute	Values
[data-state]	"active" \| "inactive"
[data-disabled]	Visible when disabled

TabsContent

Includes content related to each tab.

Prop	Type	Default	Description
value	`string`	-	The value of the tab content.

Data attribute	Values
[data-state]	"active" \| "inactive"

Examples

defaultValue

<TabsRoot defaultValue="tab2">
  <TabsList>
    <TabsTab value="tab1">Tab1</TabsTab>
    <TabsTab value="tab2">Tab2</TabsTab>
    <TabsTab value="tab3">Tab3</TabsTab>
  </TabsList>
  <TabsContent value="tab1">
    <p>TabContent1</p>
  </TabsContent>
  <TabsContent value="tab2">
    <p>TabContent2</p>
  </TabsContent>
  <TabsContent value="tab3">
    <p>TabContent3</p>
  </TabsContent>
</TabsRoot>

disabled tab

<TabsRoot>
  <TabsList>
    <TabsTab value="tab1">Tab1</TabsTab>
    <TabsTab value="tab2" disabled>
      Tab2
    </TabsTab>
    <TabsTab value="tab3">Tab3</TabsTab>
  </TabsList>
  <TabsContent value="tab1">
    <p>TabContent1</p>
  </TabsContent>
  <TabsContent value="tab2">
    <p>TabContent2</p>
  </TabsContent>
  <TabsContent value="tab3">
    <p>TabContent3</p>
  </TabsContent>
</TabsRoot>

Orientation

<TabsRoot orientation="vertical">
  <TabsList>
    <TabsTab value="tab1">Tab1</TabsTab>
    <TabsTab value="tab2">Tab2</TabsTab>
    <TabsTab value="tab3">Tab3</TabsTab>
  </TabsList>
  <TabsContent value="tab1">
    <p>TabContent1</p>
  </TabsContent>
  <TabsContent value="tab2">
    <p>TabContent2</p>
  </TabsContent>
  <TabsContent value="tab3">
    <p>TabContent3</p>
  </TabsContent>
</TabsRoot>

Switch

Toast