Flowbite React

Common errors

• TypeError: Cannot read properties of undefined (reading 'tailwindConfig')

  cause Flowbite React relies on a specific `tailwind.config.js` setup. This error often occurs when Tailwind CSS is not correctly configured or the `flowbite-react` plugin is missing from the config.
  fix Ensure `tailwind.config.js` exists and includes the `flowbite-react/plugin` in its plugins array. Run `npx flowbite-react@latest init` to automatically configure Tailwind CSS.

• Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

  cause This typically means a component was imported incorrectly (e.g., trying to default import a named export) or the component path is wrong, leading to `undefined` being rendered where a React component is expected.
  fix Verify that you are using named imports (e.g., `import { Button } from 'flowbite-react';`) for all Flowbite React components. Double-check component names and import paths for typos.

• Module not found: Error: Can't resolve 'flowbite-react'

  cause The `flowbite-react` package is not installed or not correctly resolved by your module bundler.
  fix Ensure `flowbite-react` is listed in your `package.json` and installed (`npm install flowbite-react` or `yarn add flowbite-react`). Check your bundler configuration if it's a non-standard setup.

Warnings

• gotcha The README explicitly states, '⚠️ This is a pre-release version - please note that APIs may change before the final release'. This indicates potential instability and breaking changes before a 1.0.0 release.
  Fix: Be prepared for potential API adjustments and breaking changes. Regularly review release notes when updating. Consider pinning to specific patch versions for stability in production environments.
• breaking Breaking changes related to Tailwind CSS v4 integration. If using Tailwind CSS v4, the configuration now automatically generates a v4 config file and uses CSS variables instead of inline colors for theming. This change is only applicable if you are upgrading to Tailwind CSS v4.
  Fix: Review your Tailwind CSS configuration and component styling if upgrading to Tailwind CSS v4. Ensure your custom themes are compatible with the new CSS variable approach and update any direct color class usages if necessary. Run `npx flowbite-react@latest init` to ensure your project's configuration is up-to-date.
• gotcha The recent bundle size reduction from 42 MB to 8.38 MB (flowbite-react@0.12.17) was achieved by dropping AST parsers in favor of `oxc-parser` and migrating the bundler from `tsup` to `tsdown`. While this is a positive change, it implies significant underlying build tool changes that could potentially expose new edge cases or build environment incompatibilities.
  Fix: Ensure your project's build environment and tooling are up-to-date. If encountering unexpected build issues after updating, check for specific compatibility notes related to `oxc-parser` or `tsdown` in the Flowbite React documentation or GitHub issues.

Install

• npm install flowbite-react npm
• yarn add flowbite-react yarn
• pnpm add flowbite-react pnpm

Imports

• Button
  wrong:

  import Button from 'flowbite-react';

  correct:

  import { Button } from 'flowbite-react';

  Most Flowbite React components are named exports.
• Modal
  wrong:

  const Modal = require('flowbite-react').Modal;

  correct:

  import { Modal } from 'flowbite-react';

  Flowbite React is primarily designed for ESM environments. Nested components like Modal.Header are accessed as properties of the main export.
• Flowbite
  wrong:

  import { ThemeProvider } from 'flowbite-react';

  correct:

  import { Flowbite } from 'flowbite-react';

  The 'Flowbite' component acts as a context provider for theming and configuration, often mistakenly sought under a generic 'ThemeProvider' name.
• CustomFlowbiteTheme

  import type { CustomFlowbiteTheme } from 'flowbite-react';

  TypeScript type for extending or customizing the default Flowbite theme.

Quickstart

This quickstart demonstrates the basic setup of a Flowbite React application, including how to initialize a project (using `npx create-flowbite-react@latest` implicitly), import and render core components like `Button` and `Modal`, manage component state, and apply a custom theme using the `Flowbite` context provider.

import { useState } from 'react';
import { Button, Modal, Flowbite } from 'flowbite-react';
import type { CustomFlowbiteTheme } from 'flowbite-react';

// Custom theme example for demonstration
const customTheme: CustomFlowbiteTheme = {
  button: {
    base: 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800'
  },
  modal: {
    content: {
      base: 'relative h-full w-full p-4 md:h-auto'
    }
  }
};

function App() {
  const [openModal, setOpenModal] = useState(false);

  return (
    <Flowbite theme={{ theme: customTheme }}>
      <div className="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white">
        <h1 className="text-3xl font-bold mb-4">Welcome to Flowbite React!</h1>
        <Button onClick={() => setOpenModal(true)}>Show Modal</Button>
        <Modal show={openModal} onClose={() => setOpenModal(false)} popup>
          <Modal.Header>Terms of Service</Modal.Header>
          <Modal.Body>
            <div className="space-y-6">
              <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
                With less than a month to go before the European Union enacts new consumer privacy laws,
                companies around the world are scrambling to update their data governance policies.
              </p>
              <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
                The European Union’s General Data Protection Regulation (GDPR) goes into effect on May 25,
                2018, and is meant to ensure a common set of data rights in the European Union.
              </p>
            </div>
          </Modal.Body>
          <Modal.Footer>
            <Button onClick={() => setOpenModal(false)}>I accept</Button>
            <Button color="gray" onClick={() => setOpenModal(false)}>
              Decline
            </Button>
          </Modal.Footer>
        </Modal>
      </div>
    </Flowbite>
  );
}

export default App;