How to Customize Theme - Flowbite React

---

Customize Flowbite React components using Tailwind CSS classes

Flowbite React is built on top of Tailwind CSS and it uses Tailwind CSS classes to style the components. This means that you can customize the components by changing the Tailwind CSS classes used by the components.

You have a few options, and each has its own pros and cons.

Option 1: Change the Tailwind CSS classes directly in the component

This is the easiest way to customize the components. You can change the Tailwind CSS classes directly in the component via the className prop.

import { Button } from 'flowbite-react';

export default function MyPage() {
  return <Button className="bg-red-500 hover:bg-red-600">Click me</Button>;
}

The downside of this approach is that you have to change the className prop in every component instance. This can be tedious and error-prone. Also, some components have nested elements that are not directly exposed, which in some cases makes this approach impossible.

Option 2: Create a custom theme

You can create a custom theme and pass it to the <Flowbite> component. The custom theme will be merged with the default theme, and the resulting theme will be used by the components.

import type { CustomFlowbiteTheme } from 'flowbite-react';
import { Flowbite } from 'flowbite-react';

const customTheme: CustomFlowbiteTheme = {
  button: {
    color: {
      primary: 'bg-red-500 hover:bg-red-600',
    },
  },
};

export default function MyPage() {
  return (
    <Flowbite theme={{ theme: customTheme }}>
      <Button color="primary">Click me</Button>
    </Flowbite>
  );
}

Option 3: Create a reusable component with a custom theme

You can also pass theme={} directly to any component, which will override the theme for that component, but not its children. This is useful if you want to create a reusable component with a custom theme.

import type { CustomFlowbiteTheme } from 'flowbite-react';
import { Button } from 'flowbite-react';

const customTheme: CustomFlowbiteTheme = {
  button: {
    color: {
      primary: 'bg-red-500 hover:bg-red-600',
    },
  },
};

export default function MyPage() {
  return <Button theme={customTheme}>Click me</Button>;
}