Introduction to Flowbite

Learning Goals

At the end of this Tutorial, you will be able to:

Install Flowbite for ReactJS and TailwindCSS

About Flowbite

Flowbite is a library of components built on top of the utility-classes from Tailwind CSS.

Flowbite also includes a JavaScript file that makes interactive elements work, such as modals, dropdowns, and more.

Flowbite can be easily integrated into your project through NPM. It functions as a plugin for Tailwind CSS and offers both a data attributes interface and a JavaScript API for powering interactive UI components.

You can explore the entire collection of over 32 open-source UI components and interactive elements built with React, Flowbite and Tailwind CSS.

Installing Flowbite for your ReactJS app

After you have installed Tailwind CSS for a ReactJS app, you can then install Flowbite as follows:

In a terminal, navigate to your app root folder and enter the following command:
```
npm install flowbite flowbite-react
```
Update your tailwind.config.js file to require Flowbite as a plugin:
```
module.exports = {
darkMode: "class",                
// ...
  plugins: [
      require("flowbite/plugin")
  ]            
}
```
The media option automatically sets the dark or light theme based on the browser’s color scheme preference.
To your own content data add the Flowbite source paths to apply the classes from the interactive elements:
```
module.exports = {
  content: [
      // ...
      "node_modules/flowbite-react/lib/esm/**/*.js"
  ]
}
```
Your final task is to download the JavaScript file required for Flowbite's interactive components. Begin by creating a /libs folder in the root folder of your ReactJS app:
```
C:\react-stuff\apps\app-react-awesome> mkdir libs
```
Download the Flowbite JavaScript file below to this folder:

flowbite.min.js

You can then import the Flowbite JavaScript file directly into your React components where needed. For example:

import React from 'react';
import './libs/flowbite.min.js'; // Adjust the path accordingly
            
function MyComponent() {
     // Your component code here
}
            
export default MyComponent;