React Theme - Flowbite

Table of Contents#

• Option 1: Change the Tailwind CSS classes directly in the component
• Option 2: Create a custom theme
• Option 3: Create a reusable component with a custom theme

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