Use with ESBuild - Flowbite React

Learn how to install Flowbite React with ESBuild

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

  1. Quick Start: Create a new project with everything pre-configured
  2. Add to Existing Project: Add Flowbite React to an existing ESBuild 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 ESBuild project with Flowbite React, Tailwind CSS, and all necessary configurations:

npx create-flowbite-react@latest -t esbuild

This will:

  • Create a new ESBuild 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

Add to Existing Project#

If you already have an ESBuild 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 esbuild-react-app
cd esbuild-react-app
npm init -y

Create package.json file:

{
  "name": "esbuild-react-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "node esbuild.dev.js",
    "build": "node esbuild.build.js"
  }
}

Install the required dependencies:

npm install react react-dom
npm install -D @types/react @types/react-dom esbuild typescript tailwindcss @tailwindcss/postcss

Create tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"]
}

Create esbuild.dev.js:

import { readFile } from "node:fs/promises";
import { createServer } from "node:http";
import tailwindcss from "@tailwindcss/postcss";
import * as esbuild from "esbuild";
import flowbiteReact from "flowbite-react/plugin/esbuild";
import postcss from "postcss";

const clients = new Set();

const cssPlugin = {
  name: "css",
  setup(build) {
    build.onLoad({ filter: /\.css$/ }, async (args) => {
      const css = await readFile(args.path, "utf8");
      const result = await postcss([tailwindcss]).process(css, {
        from: args.path,
        map: { inline: true },
      });

      return {
        contents: result.css,
        loader: "css",
      };
    });
  },
};

const buildOptions = {
  entryPoints: ["src/main.tsx"],
  bundle: true,
  outdir: "dist",
  sourcemap: true,
  format: "esm",
  loader: {
    ".tsx": "tsx",
    ".ts": "tsx",
    ".jsx": "jsx",
    ".js": "jsx",
  },
  plugins: [
    cssPlugin,
    flowbiteReact(),
    {
      name: "live-reload",
      setup(build) {
        build.onEnd(() => {
          clients.forEach((client) => client.write("data: update\n\n"));
        });
      },
    },
  ],
};

const ctx = await esbuild.context(buildOptions);
await ctx.watch();

// Initial build
await ctx.rebuild();

// Simple HTTP server
createServer(async (req, res) => {
  const { url } = req;

  if (url === "/esbuild") {
    return clients.add(
      res.writeHead(200, {
        "Content-Type": "text/event-stream",
        "Cache-Control": "no-cache",
        Connection: "keep-alive",
      }),
    );
  }

  try {
    let path = url === "/" ? "/index.html" : url;
    const filePath = path.startsWith("/dist") ? path.slice(1) : `.${path}`;

    const content = await readFile(filePath);
    const ext = path.split(".").pop();

    const contentTypes = {
      html: "text/html",
      js: "text/javascript",
      css: "text/css",
      png: "image/png",
      jpg: "image/jpeg",
      jpeg: "image/jpeg",
      gif: "image/gif",
      svg: "image/svg+xml",
    };

    res.writeHead(200, {
      "Content-Type": contentTypes[ext] || "text/plain",
    });
    res.end(content);
  } catch (e) {
    res.writeHead(404);
    res.end("Not found");
  }
}).listen(3000);

console.log("Development server running on http://localhost:3000");

Create esbuild.build.js:

import { readFile } from "node:fs/promises";
import tailwindcss from "@tailwindcss/postcss";
import * as esbuild from "esbuild";
import flowbiteReact from "flowbite-react/plugin/esbuild";
import postcss from "postcss";

const cssPlugin = {
  name: "css",
  setup(build) {
    build.onLoad({ filter: /\.css$/ }, async (args) => {
      const css = await readFile(args.path, "utf8");
      const result = await postcss([tailwindcss]).process(css, {
        from: args.path,
      });

      return {
        contents: result.css,
        loader: "css",
      };
    });
  },
};

await esbuild.build({
  entryPoints: ["src/main.tsx"],
  bundle: true,
  minify: true,
  sourcemap: true,
  outdir: "dist",
  format: "esm",
  loader: {
    ".tsx": "tsx",
    ".ts": "tsx",
    ".jsx": "jsx",
    ".js": "jsx",
  },
  plugins: [cssPlugin, flowbiteReact()],
});

Create index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>esbuild React App</title>
    <link rel="stylesheet" href="/dist/main.css" />
    <script type="module" src="/dist/main.js"></script>
    <script>
      new EventSource("/esbuild").addEventListener("message", () => location.reload());
    </script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Create src/main.tsx:

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

import "./index.css";

const root = document.getElementById("root");
if (!root) throw new Error("Root element not found");

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

Create src/App.tsx:

export default function App() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-gray-50">
      <div className="w-full max-w-md rounded-lg bg-white p-8 shadow-lg">
        <h1 className="mb-4 text-3xl font-bold text-gray-900">esbuild + React + Tailwind</h1>
        <p className="text-gray-600">
          Welcome to your new project! This template is set up with esbuild for blazing-fast builds, React for UI
          components, and Tailwind CSS for styling.
        </p>
      </div>
    </div>
  );
}

Create src/index.css:

@import "tailwindcss";

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

Try it out#

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

// src/App.tsx
import { Button } from "flowbite-react";

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

Templates#