React Tabs - Flowbite

Get started with the tabs component from Flowbite React to show a list of tab items where you can switch between them using multiple styles, colors and layouts

The tabs component can be used to show a list of tab items that you can click on to change the content inside of the main tabs component using React state reactivity.

Choose one of the examples below based on various styles, layouts, and content types that you can customize with React components, props and the utility classes from Tailwind CSS.

Make sure that you import the component from the flowbite-react library:

'use client';

import { Tabs } from 'flowbite-react';

Default tabs

Add the <Tabs.Item> child component to the <Tabs.Group> component to create a tab item and you can add any type of markup and React components inside of it and it will be shown when clicking on the associated tab item.

You can also choose to add the active prop to the <Tabs.Item> component to make it active by default and set the title of the tab item using the title prop.

Additionally, if you pass the disabled prop to the <Tabs.Item> component, it will be disabled and you won't be able to click on it.

Edit on GitHub

This is Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.

  • React TypeScript
'use client';

import { Tabs } from 'flowbite-react';
import { HiAdjustments, HiClipboardList, HiUserCircle } from 'react-icons/hi';
import { MdDashboard } from 'react-icons/md';

export default function DefaultTabs() {
  return (
    <Tabs.Group
      aria-label="Default tabs"
      style="default"
    >
      <Tabs.Item
        active
        icon={HiUserCircle}
        title="Profile"
      >
        <p>
          This is
          <span className="font-medium text-gray-800 dark:text-white">
            Profile tab's associated content
          </span>
          .
          Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
          control the content visibility and styling.
        </p>
      </Tabs.Item>
      <Tabs.Item
        icon={MdDashboard}
        title="Dashboard"
      >
        <p>
          This is
          <span className="font-medium text-gray-800 dark:text-white">
            Dashboard tab's associated content
          </span>
          .
          Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
          control the content visibility and styling.
        </p>
      </Tabs.Item>
      <Tabs.Item
        icon={HiAdjustments}
        title="Settings"
      >
        <p>
          This is
          <span className="font-medium text-gray-800 dark:text-white">
            Settings tab's associated content
          </span>
          .
          Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
          control the content visibility and styling.
        </p>
      </Tabs.Item>
      <Tabs.Item
        icon={HiClipboardList}
        title="Contacts"
      >
        <p>
          This is
          <span className="font-medium text-gray-800 dark:text-white">
            Contacts tab's associated content
          </span>
          .
          Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
          control the content visibility and styling.
        </p>
      </Tabs.Item>
      <Tabs.Item
        disabled
        title="Disabled"
      >
        <p>
          Disabled content
        </p>
      </Tabs.Item>
    </Tabs.Group>
  )
}

Tabs with underline

Pass the style="underline" prop to the <Tabs.Group> component to make the tabs have an underline style.

Edit on GitHub

This is Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.

  • React TypeScript
'use client';

import { Tabs } from 'flowbite-react';
import { HiAdjustments, HiClipboardList, HiUserCircle } from 'react-icons/hi';
import { MdDashboard } from 'react-icons/md';

export default function TabsWithUnderline() {
  return (
    <Tabs.Group
      aria-label="Tabs with underline"
      style="underline"
    >
      <Tabs.Item
        active
        icon={HiUserCircle}
        title="Profile"
      >
        <p>
          This is
          <span className="font-medium text-gray-800 dark:text-white">
            Profile tab's associated content
          </span>
          .
          Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
          control the content visibility and styling.
        </p>
      </Tabs.Item>
      <Tabs.Item
        icon={MdDashboard}
        title="Dashboard"
      >
        <p>
          This is
          <span className="font-medium text-gray-800 dark:text-white">
            Dashboard tab's associated content
          </span>
          .
          Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
          control the content visibility and styling.
        </p>
      </Tabs.Item>
      <Tabs.Item
        icon={HiAdjustments}
        title="Settings"
      >
        <p>
          This is
          <span className="font-medium text-gray-800 dark:text-white">
            Settings tab's associated content
          </span>
          .
          Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
          control the content visibility and styling.
        </p>
      </Tabs.Item>
      <Tabs.Item
        icon={HiClipboardList}
        title="Contacts"
      >
        <p>
          This is
          <span className="font-medium text-gray-800 dark:text-white">
            Contacts tab's associated content
          </span>
          .
          Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
          control the content visibility and styling.
        </p>
      </Tabs.Item>
      <Tabs.Item
        disabled
        title="Disabled"
      >
        <p>
          Disabled content
        </p>
      </Tabs.Item>
    </Tabs.Group>
  )
}

Tabs with icons

Pass the icon prop to the <Tabs.Item> component to add an icon to the tab item.

Edit on GitHub

This is Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.

  • React TypeScript
'use client';

import { Tabs } from 'flowbite-react';
import { HiAdjustments, HiClipboardList, HiUserCircle } from 'react-icons/hi';
import { MdDashboard } from 'react-icons/md';

export default function TabsWithIcons() {
  return (
    <Tabs.Group
      aria-label="Tabs with icons"
      style="underline"
    >
      <Tabs.Item
        active
        icon={HiUserCircle}
        title="Profile"
      >
        <p>
          This is
          <span className="font-medium text-gray-800 dark:text-white">
            Profile tab's associated content
          </span>
          .
          Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
          control the content visibility and styling.
        </p>
      </Tabs.Item>
      <Tabs.Item
        icon={MdDashboard}
        title="Dashboard"
      >
        <p>
          This is
          <span className="font-medium text-gray-800 dark:text-white">
            Dashboard tab's associated content
          </span>
          .
          Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
          control the content visibility and styling.
        </p>
      </Tabs.Item>
      <Tabs.Item
        icon={HiAdjustments}
        title="Settings"
      >
        <p>
          This is
          <span className="font-medium text-gray-800 dark:text-white">
            Settings tab's associated content
          </span>
          .
          Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
          control the content visibility and styling.
        </p>
      </Tabs.Item>
      <Tabs.Item
        icon={HiClipboardList}
        title="Contacts"
      >
        <p>
          This is
          <span className="font-medium text-gray-800 dark:text-white">
            Contacts tab's associated content
          </span>
          .
          Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
          control the content visibility and styling.
        </p>
      </Tabs.Item>
      <Tabs.Item
        disabled
        title="Disabled"
      >
        <p>
          Disabled content
        </p>
      </Tabs.Item>
    </Tabs.Group>
  )
}

Tabs with pills

Add the style="pills" prop to the <Tabs.Group> component to make the tabs have a pills style with rounded corners as an alternative style.

Edit on GitHub

Content 1

  • React TypeScript
'use client';

import { Tabs } from 'flowbite-react';

export default function PillsTabs() {
  return (
    <Tabs.Group
      aria-label="Pills"
      style="pills"
    >
      <Tabs.Item
        active
        title="Tab 1"
      >
        <p className="text-sm text-gray-500 dark:text-gray-400">
          Content 1
        </p>
      </Tabs.Item>
      <Tabs.Item title="Tab 2">
        <p className="text-sm text-gray-500 dark:text-gray-400">
          Content 2
        </p>
      </Tabs.Item>
      <Tabs.Item title="Tab 3">
        <p className="text-sm text-gray-500 dark:text-gray-400">
          Content 3
        </p>
      </Tabs.Item>
      <Tabs.Item title="Tab 4">
        <p className="text-sm text-gray-500 dark:text-gray-400">
          Content 4
        </p>
      </Tabs.Item>
      <Tabs.Item
        disabled
        title="Tab 5"
      >
        <p className="text-sm text-gray-500 dark:text-gray-400">
          Content 5
        </p>
      </Tabs.Item>
    </Tabs.Group>
  )
}

Full width tabs

Make the tabs span the full width of their container, pass the style="fullWidth" prop to the <Tabs.Group>

Edit on GitHub

This is Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.

  • React TypeScript
'use client';

import { Tabs } from 'flowbite-react';
import { HiAdjustments, HiClipboardList, HiUserCircle } from 'react-icons/hi';
import { MdDashboard } from 'react-icons/md';

export default function FullWidthTabs() {
  return (
    <Tabs.Group
      aria-label="Full width tabs"
      style="fullWidth"
    >
      <Tabs.Item
        active
        icon={HiUserCircle}
        title="Profile"
      >
        <p>
          This is
          <span className="font-medium text-gray-800 dark:text-white">
            Profile tab's associated content
          </span>
          .
          Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
          control the content visibility and styling.
        </p>
      </Tabs.Item>
      <Tabs.Item
        icon={MdDashboard}
        title="Dashboard"
      >
        <p>
          This is
          <span className="font-medium text-gray-800 dark:text-white">
            Dashboard tab's associated content
          </span>
          .
          Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
          control the content visibility and styling.
        </p>
      </Tabs.Item>
      <Tabs.Item
        icon={HiAdjustments}
        title="Settings"
      >
        <p>
          This is
          <span className="font-medium text-gray-800 dark:text-white">
            Settings tab's associated content
          </span>
          .
          Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
          control the content visibility and styling.
        </p>
      </Tabs.Item>
      <Tabs.Item
        icon={HiClipboardList}
        title="Contacts"
      >
        <p>
          This is
          <span className="font-medium text-gray-800 dark:text-white">
            Contacts tab's associated content
          </span>
          .
          Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
          control the content visibility and styling.
        </p>
      </Tabs.Item>
      <Tabs.Item
        disabled
        title="Disabled"
      >
        <p>
          Disabled content
        </p>
      </Tabs.Item>
    </Tabs.Group>
  )
}

React state options

Here's an example on how you can set the activate tab programatically using the React state variables and functions of activateTab and setActivateTab.

Edit on GitHub

This is Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.

Active tab: 0
  • React TypeScript
'use client';

import { Button, Tabs, type TabsRef } from 'flowbite-react';
import { HiAdjustments, HiClipboardList, HiUserCircle } from 'react-icons/hi';
import { MdDashboard } from 'react-icons/md';

export default function SetActiveTabProgrammatically() {
  const [activeTab, setActiveTab] = useState<number>(0);
  const tabsRef = useRef<TabsRef>(null);
  const props = { setActiveTab, tabsRef };

  return (
    <>
      <Tabs.Group
        aria-label="Default tabs"
        style="default"
        ref={props.tabsRef}
        onActiveTabChange={(tab) => props.setActiveTab(tab)}
      >
        <Tabs.Item active title="Profile" icon={HiUserCircle}>
          This is <span className="font-medium text-gray-800 dark:text-white">Profile tab's associated content</span>.
          Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
          control the content visibility and styling.
        </Tabs.Item>
        <Tabs.Item title="Dashboard" icon={MdDashboard}>
          This is <span className="font-medium text-gray-800 dark:text-white">Dashboard tab's associated content</span>.
          Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
          control the content visibility and styling.
        </Tabs.Item>
        <Tabs.Item title="Settings" icon={HiAdjustments}>
          This is <span className="font-medium text-gray-800 dark:text-white">Settings tab's associated content</span>.
          Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
          control the content visibility and styling.
        </Tabs.Item>
        <Tabs.Item title="Contacts" icon={HiClipboardList}>
          This is <span className="font-medium text-gray-800 dark:text-white">Contacts tab's associated content</span>.
          Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
          control the content visibility and styling.
        </Tabs.Item>
        <Tabs.Item disabled title="Disabled">
          Disabled content
        </Tabs.Item>
      </Tabs.Group>
      <div className="pb-4 pt-2 text-sm text-gray-500 dark:text-gray-400">Active tab: {props.activeTab}</div>
      <Button.Group>
        <Button color="gray" onClick={() => props.tabsRef.current?.setActiveTab(0)}>
          Profile
        </Button>
        <Button color="gray" onClick={() => props.tabsRef.current?.setActiveTab(1)}>
          Dashboard
        </Button>
        <Button color="gray" onClick={() => props.tabsRef.current?.setActiveTab(2)}>
          Settings
        </Button>
        <Button color="gray" onClick={() => props.tabsRef.current?.setActiveTab(3)}>
          Contacts
        </Button>
      </Button.Group>
    </>
  )
}

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

{
  "base": "flex flex-col gap-2",
  "tablist": {
    "base": "flex text-center",
    "styles": {
      "default": "flex-wrap border-b border-gray-200 dark:border-gray-700",
      "underline": "flex-wrap -mb-px border-b border-gray-200 dark:border-gray-700",
      "pills": "flex-wrap font-medium text-sm text-gray-500 dark:text-gray-400 space-x-2",
      "fullWidth": "w-full text-sm font-medium divide-x divide-gray-200 shadow grid grid-flow-col dark:divide-gray-700 dark:text-gray-400 rounded-none"
    },
    "tabitem": {
      "base": "flex items-center justify-center p-4 rounded-t-lg text-sm font-medium first:ml-0 disabled:cursor-not-allowed disabled:text-gray-400 disabled:dark:text-gray-500 focus:ring-4 focus:ring-cyan-300 focus:outline-none",
      "styles": {
        "default": {
          "base": "rounded-t-lg",
          "active": {
            "on": "bg-gray-100 text-cyan-600 dark:bg-gray-800 dark:text-cyan-500",
            "off": "text-gray-500 hover:bg-gray-50 hover:text-gray-600 dark:text-gray-400 dark:hover:bg-gray-800  dark:hover:text-gray-300"
          }
        },
        "underline": {
          "base": "rounded-t-lg",
          "active": {
            "on": "text-cyan-600 rounded-t-lg border-b-2 border-cyan-600 active dark:text-cyan-500 dark:border-cyan-500",
            "off": "border-b-2 border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300"
          }
        },
        "pills": {
          "base": "",
          "active": {
            "on": "rounded-lg bg-cyan-600 text-white",
            "off": "rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
          }
        },
        "fullWidth": {
          "base": "ml-0 first:ml-0 w-full rounded-none flex",
          "active": {
            "on": "p-4 text-gray-900 bg-gray-100 active dark:bg-gray-700 dark:text-white rounded-none",
            "off": "bg-white hover:text-gray-700 hover:bg-gray-50 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700 rounded-none"
          }
        }
      },
      "icon": "mr-2 h-5 w-5"
    }
  },
  "tabpanel": "py-3"
}

References