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#