Use with Webpack - Flowbite React

Learn how to install Flowbite React with Webpack

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

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

Quick Start#

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

npx create-flowbite-react@latest -t webpack

This will:

  • Create a new React project with Webpack
  • 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

Add to Existing Project#

If you already have a Webpack + React 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
Manual Setup

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 directory and initialize a new project:

mkdir webpack-project
cd webpack-project
npm init -y

Install necessary packages:

npm install react react-dom
npm install -D webpack webpack-cli webpack-dev-server @babel/core @babel/preset-react @babel/preset-env @babel/preset-typescript babel-loader typescript @types/react @types/react-dom postcss css-loader style-loader postcss-loader

Update your package.json to include these scripts:

{
  "scripts": {
    "dev": "webpack serve --mode development --open",
    "build": "webpack --mode production",
    "start": "webpack serve --mode production"
  }
}

Create tsconfig.json file:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

Create webpack.config.js file:

const path = require("path");
const { ProvidePlugin } = require("webpack");

module.exports = {
  entry: "./src/index.tsx",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx|js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
          },
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js", ".jsx"],
  },
  devServer: {
    static: {
      directory: path.join(__dirname, "public"),
    },
    port: 3000,
  },
  plugins: [
    new ProvidePlugin({
      React: "react",
    }),
  ],
};

Create public/index.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flowbite React + Webpack + TypeScript</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="/bundle.js"></script>
  </body>
</html>

Create src/index.tsx file:

import React from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App";

import "./styles.css";

const container = document.getElementById("root");
if (!container) throw new Error("Failed to find the root element");
const root = createRoot(container);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

Create src/App.tsx file:

import React from "react";

export function App() {
  const [count, setCount] = React.useState(0);

  return (
    <div className="p-4">
      <h1 className="mb-4 text-2xl font-bold">Welcome to React + Webpack</h1>
      <p className="mb-4">This is a sample component to test your setup.</p>
      <div className="flex items-center gap-2">
        <button
          onClick={() => setCount(count + 1)}
          className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
        >
          Count: {count}
        </button>
      </div>
    </div>
  );
}

2. Configure Tailwind CSS#

Install Tailwind CSS and its dependencies:

npm install -D tailwindcss @tailwindcss/postcss

Create a postcss.config.mjs file:

touch postcss.config.mjs

Add @tailwindcss/postcss to your postcss.config.mjs file:

/** @type {import('postcss-load-config').Config} */
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

Create src/styles.css file:

@import "tailwindcss";

3. 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
  • Set up necessary configurations

Try it out#

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

// src/App.tsx
export function App() {
  return (
    <>
      <Button>Click me</Button>
    </>
  );
}

Templates#