CODEWITHSUNDEEP
javascriptcssreactjsnext.jsflowbite
Muhammad Haekal
Muhammad Haekal

Reputation: 612

Change color of flowbite-react Tabs component (Next.js)

I am seeking how to change the color of tabs in flowbite-react component, I'm using Next.js. I already setup as per doc here https://flowbite.com/docs/getting-started/next-js/

Also I realized that there is no ClassName property in Tabs component, so I tried to use the color property, but nothing happened.

Here is the SS:

No ClassName property in Tabs.Group

enter image description here

No ClassName property in Tabs.Item

enter image description here

Color not changed using color property

enter image description here

Upvotes: 10

Views: 1739

Answers (1)

Siavash1991
Siavash1991

Reputation: 66

You're correct that the className property does not apply directly to the Tabs component in flowbite-react. However, you can still style the tabs using the following two options:

Option A: Use CSS Selectors You can target the role attributes used in the Tabs component with CSS like this:

/* Target all tabs */
div[role="tablist"] button[role="tab"] {
  background-color: red; /* Default background for all tabs */
  color: white; /* Default text color */
}

/* Style the active (selected) tab */
div[role="tablist"] button[role="tab"][aria-selected="true"] {
  background-color: green; /* Background for the active tab */
  color: white; /* Text color for the active tab */
}

Place this CSS in your global stylesheet (e.g., globals.css for Next.js) or in a CSS module if you're scoping styles.

Option B: Use Flowbite's Custom Theme

Flowbite provides a way to customize its components via a theme property. You can define a custom theme for the Tabs component in your project.

Here’s how to do it:

Define your custom theme:

const customTheme = {
    base: 'flex flex-col',
    tablist: {
        base: 'flex space-x-2 border-b border-gray-200',
    },
    tab: {
        base: 'p-4 rounded-t-lg',
        active: 'bg-green-500 text-white',
        inactive: 'bg-red-500 text-white',
    },
};

Apply the custom theme:

<Tabs.Group theme={customTheme}>
    <Tabs.Item title="Tab 1">Content for Tab 1</Tabs.Item>
    <Tabs.Item title="Tab 2">Content for Tab 2</Tabs.Item>
    <Tabs.Item title="Tab 3">Content for Tab 3</Tabs.Item>
</Tabs.Group>

Upvotes: 1

Related Questions