How can I style flowbite react tabs?

Question

I am using Tabs from flowbite, the tailwind component library. But there is no way to customize the design colors of the tabs. Is any have used it?

This is the output

import { Tabs } from "flowbite-react";     

export default function CoursesTab() {
  return (
    <>
      <Tabs.Group aria-label="Tabs with underline" style="underline" className="justify-between">
        {categories.map((category, index) => {
          return (
            <Tabs.Item className="Chinmoy" key={index} title={category.name}>
              {category.name} content
            </Tabs.Item>
          );
        })}
      </Tabs.Group>
    </>
  );
}

How to customize the tabs color and border color

Have you found any solution? I have the same issue – Mohammed Noureldin Jul 28 '23 at 10:15 — Mohammed Noureldin, Jul 28 '23 at 10:15

score 0 · Answer 1 · answered Aug 08 '23 at 20:38

One of the solutions can be adding a theme to the component. For example,


// Refer the object from https://www.flowbite-react.com/docs/components/tabs

const customTabTheme: FlowbiteTabTheme = {
  "base": "flex flex-col gap-2",
  ...
}

export default function CoursesTab() {
  return (
    <>
      <Tabs.Group 
        aria-label="Tabs with underline" 
        style="underline" 
        className="justify-between"
        theme={customTabTheme}   // <-- Add theme like this
      >
        {categories.map((category, index) => {
          return (
            <Tabs.Item className="Chinmoy" key={index} title={category.name}>
              {category.name} content
            </Tabs.Item>
          );
        })}
      </Tabs.Group>
    </>
  );
}

You may see the tab colors and boders in the theme object.

How can I style flowbite react tabs?

1 Answers1