Tabs

The Tabs component displays a group of buttons used to navigate between different views.

Default

A basic tab group with internal state and static content blocks.

Build the perfect messaging experience in 10 minutes.

<Tabs
tabs={[
  { label: "Home", content: <div>...</div> },
  { label: "Profile", content: <div>...</div> },
  { label: "Settings", content: <div>...</div> },
]}
/>

With icons

Each tab can optionally include an icon component before the label.

Explore the many out-of-the-box features of TalkJS.

<Tabs
tabs={[
  {
    label: (
      <span className="flex items-center gap-1.5">
        <Home className="w-4 h-4" /> Home
      </span>
    ),
    content: <Text as="p">...</Text>,
  },
  {
    label: (
      <span className="flex items-center gap-1.5">
        <View className="w-4 h-4" /> Components
      </span>
    ),
    content: <Text as="p">...</Text>,
  },
  {
    label: (
      <span className="flex items-center gap-1.5">
        <Wikis className="w-4 h-4" /> Customers
      </span>
    ),
    content: <Text as="p">...</Text>,
  },
]}
/>

Props

tabs — Array of tab objects with label and content.
onChange — Optional callback called with the selected label.

Usage

Import the Tabs component and define your tab label, content, and optional onChange handler.

import Tabs from "../../components/Tabs";

<Tabs
tabs={[
  { label: "Home", content: <div>...</div> },
  { label: "Profile", content: <div>...</div> },
]}
onChange={(label) => console.log("Selected:", label)}
/>