Use with Gatsby - Flowbite React

This guide provides three ways to integrate Flowbite React with Gatsby:

1. Quick Start: Create a new project with everything pre-configured
2. Add to Existing Project: Add Flowbite React to an existing Gatsby project
3. Manual Setup: Set up everything from scratch manually

Quick Start#

The fastest way to get started is using our project creation CLI, which sets up a new Gatsby project with Flowbite React, Tailwind CSS, and all necessary configurations:

npx create-flowbite-react@latest -t gatsby

This will:

• Create a new Gatsby project
• Install and configure Tailwind CSS
• Set up Flowbite React with all required dependencies
• Configure dark mode support
• Set up example components

Add to Existing Project#

If you already have a Gatsby project and want to add Flowbite React, you can use our initialization CLI:

npx flowbite-react@latest init

This will automatically:

• Install Flowbite React and its dependencies
• Configure Tailwind CSS to include Flowbite React plugin
• Set up necessary configurations for dark mode

Manual Setup#

If you prefer to set everything up manually or need more control over the configuration, follow these steps:

1. Create Project#

Create a new Gatsby project with Tailwind CSS:

npm init gatsby

When prompted:

• Select "Tailwind CSS" to "Would you like to install a styling system?" question.

(Omit this when Gatsby CLI tailwind template is updated to v4.)

Note: Install the correct version of Tailwind CSS, Gatsby CLI installs Tailwind CSS v4 by default but their template is configured for v3:

npm install -D tailwindcss@^3

2. Install Flowbite React#

Install Flowbite React:

npx flowbite-react@latest init

This will:

• Install Flowbite React and its dependencies
• Configure Tailwind CSS to include Flowbite React plugin
• Configure Vite to include Flowbite React plugin

3. Configure Dark Mode#

In server side rendered applications like Gatsby, to avoid page flicker when dark mode is set, you need to configure the ThemeModeScript component:

1. Create gatsby-ssr.js file at the root folder of the project:

// gatsby-ssr.js
export const onRenderBody = ({ setPreBodyComponents }) => {
  setPreBodyComponents([]);
};

2. Import ThemeModeScript and add it to setPreBodyComponents function:

// gatsby-ssr.js
import { ThemeModeScript } from "flowbite-react";

export const onRenderBody = ({ setPreBodyComponents }) => {
  setPreBodyComponents([ThemeModeScript]);
};

Try it out#

Now that you have successfully installed Flowbite React you can start using the components from the library:

// src/pages/index.tsx (or .jsx)
import { Button } from "flowbite-react";

export default function IndexPage() {
  return <Button>Click me</Button>;
}

Templates#

• Github
• StackBlitz