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.

This is some placeholder content the 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.

<Tabs.Group
  aria-label="Default tabs"
  style="default"
>
  <Tabs.Item
    active
    title="Profile"
  >
    <p className="text-sm text-gray-500 dark:text-gray-400">
      <p>
        This is some placeholder content the 
        
        <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>
    </p>
  </Tabs.Item>
  <Tabs.Item title="Dashboard">
    <p className="text-sm text-gray-500 dark:text-gray-400">
      <p>
        This is some placeholder content the 
        
        <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>
    </p>
  </Tabs.Item>
  <Tabs.Item title="Settings">
    <p className="text-sm text-gray-500 dark:text-gray-400">
      <p>
        This is some placeholder content the 
        
        <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>
    </p>
  </Tabs.Item>
  <Tabs.Item title="Contacts">
    <p className="text-sm text-gray-500 dark:text-gray-400">
      <p>
        This is some placeholder content the 
        
        <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>
    </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.

This is some placeholder content the 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.

<Tabs.Group
  aria-label="Tabs with underline"
  style="underline"
>
  <Tabs.Item
    active
    title="Profile"
  >
    <p className="text-sm text-gray-500 dark:text-gray-400">
      <p>
        This is some placeholder content the 
        
        <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>
    </p>
  </Tabs.Item>
  <Tabs.Item title="Dashboard">
    <p className="text-sm text-gray-500 dark:text-gray-400">
      <p>
        This is some placeholder content the 
        
        <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>
    </p>
  </Tabs.Item>
  <Tabs.Item title="Settings">
    <p className="text-sm text-gray-500 dark:text-gray-400">
      <p>
        This is some placeholder content the 
        
        <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>
    </p>
  </Tabs.Item>
  <Tabs.Item title="Contacts">
    <p className="text-sm text-gray-500 dark:text-gray-400">
      <p>
        This is some placeholder content the 
        
        <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>
    </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.

This is some placeholder content the 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.

<Tabs.Group
  aria-label="Tabs with icons"
  style="underline"
>
  <Tabs.Item
    active
    icon={HiUserCircle}
    title="Profile"
  >
    <p className="text-sm text-gray-500 dark:text-gray-400">
      <p>
        This is some placeholder content the 
        
        <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>
    </p>
  </Tabs.Item>
  <Tabs.Item
    icon={MdDashboard}
    title="Dashboard"
  >
    <p className="text-sm text-gray-500 dark:text-gray-400">
      <p>
        This is some placeholder content the 
        
        <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>
    </p>
  </Tabs.Item>
  <Tabs.Item
    icon={HiAdjustments}
    title="Settings"
  >
    <p className="text-sm text-gray-500 dark:text-gray-400">
      <p>
        This is some placeholder content the 
        
        <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>
    </p>
  </Tabs.Item>
  <Tabs.Item
    icon={HiClipboardList}
    title="Contacts"
  >
    <p className="text-sm text-gray-500 dark:text-gray-400">
      <p>
        This is some placeholder content the 
        
        <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>
    </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.

Content 1

<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>

This is some placeholder content the 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.

<Tabs.Group
  aria-label="Full width tabs"
  style="fullWidth"
>
  <Tabs.Item
    active
    title="Profile"
  >
    <p className="text-sm text-gray-500 dark:text-gray-400">
      <p>
        This is some placeholder content the 
        
        <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>
    </p>
  </Tabs.Item>
  <Tabs.Item title="Dashboard">
    <p className="text-sm text-gray-500 dark:text-gray-400">
      <p>
        This is some placeholder content the 
        
        <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>
    </p>
  </Tabs.Item>
  <Tabs.Item title="Settings">
    <p className="text-sm text-gray-500 dark:text-gray-400">
      <p>
        This is some placeholder content the 
        
        <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>
    </p>
  </Tabs.Item>
  <Tabs.Item title="Contacts">
    <p className="text-sm text-gray-500 dark:text-gray-400">
      <p>
        This is some placeholder content the 
        
        <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>
    </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.

This is some placeholder content the 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
<Tabs.Group
  ref={{
    current: '[Circular]'
  }}
  aria-label="Default tabs"
  onActiveTabChange={onActiveTabChange}
  style="default"
>
  <Tabs.Item
    active
    title="Profile"
  >
    <p className="text-sm text-gray-500 dark:text-gray-400">
      <p>
        This is some placeholder content the 
        
        <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>
    </p>
  </Tabs.Item>
  <Tabs.Item title="Dashboard">
    <p className="text-sm text-gray-500 dark:text-gray-400">
      <p>
        This is some placeholder content the 
        
        <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>
    </p>
  </Tabs.Item>
  <Tabs.Item title="Settings">
    <p className="text-sm text-gray-500 dark:text-gray-400">
      <p>
        This is some placeholder content the 
        
        <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>
    </p>
  </Tabs.Item>
  <Tabs.Item title="Contacts">
    <p className="text-sm text-gray-500 dark:text-gray-400">
      <p>
        This is some placeholder content the 
        
        <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>
    </p>
  </Tabs.Item>
</Tabs.Group>
<div className="pt-2 pb-4 text-sm text-gray-500 dark:text-gray-400">
  Active tab: 0
</div>
<Button.Group>
  <Button
    color="gray"
    onClick={onClick}
  >
    <p>
      Profile
    </p>
  </Button>
  <Button
    color="gray"
    onClick={onClick}
  >
    <p>
      Dashboard
    </p>
  </Button>
  <Button
    color="gray"
    onClick={onClick}
  >
    <p>
      Settings
    </p>
  </Button>
  <Button
    color="gray"
    onClick={onClick}
  >
    <p>
      Contacts
    </p>
  </Button>
</Button.Group>

References