{"id":15111,"library":"flowbite-react","title":"Flowbite React","description":"Flowbite React is an open-source library providing official React components built on top of the Flowbite design system and styled with Tailwind CSS utility classes. It aims to accelerate web development by offering a collection of pre-built, interactive UI components like buttons, modals, navigation bars, and forms. Currently at version 0.12.17, the library maintains an active development pace with frequent patch releases addressing bug fixes, performance improvements (e.g., recent bundle size reduction), and new features. Its key differentiators include being the official React implementation of Flowbite, deep integration with Tailwind CSS for customizable styling, and providing robust TypeScript support for enhanced developer experience. It targets React 18 and 19, and Tailwind CSS 3 and 4, ensuring compatibility with modern React ecosystems.","status":"active","version":"0.12.17","language":"javascript","source_language":"en","source_url":"https://github.com/themesberg/flowbite-react","tags":["javascript","design-system","flowbite","flowbite-react","react","tailwind","tailwindcss","tailwind-css","typescript"],"install":[{"cmd":"npm install flowbite-react","lang":"bash","label":"npm"},{"cmd":"yarn add flowbite-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add flowbite-react","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React applications.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components to the DOM.","package":"react-dom","optional":false},{"reason":"Peer dependency for styling; Flowbite React components are styled with Tailwind CSS.","package":"tailwindcss","optional":false}],"imports":[{"note":"Most Flowbite React components are named exports.","wrong":"import Button from 'flowbite-react';","symbol":"Button","correct":"import { Button } from 'flowbite-react';"},{"note":"Flowbite React is primarily designed for ESM environments. Nested components like Modal.Header are accessed as properties of the main export.","wrong":"const Modal = require('flowbite-react').Modal;","symbol":"Modal","correct":"import { Modal } from 'flowbite-react';"},{"note":"The 'Flowbite' component acts as a context provider for theming and configuration, often mistakenly sought under a generic 'ThemeProvider' name.","wrong":"import { ThemeProvider } from 'flowbite-react';","symbol":"Flowbite","correct":"import { Flowbite } from 'flowbite-react';"},{"note":"TypeScript type for extending or customizing the default Flowbite theme.","symbol":"CustomFlowbiteTheme","correct":"import type { CustomFlowbiteTheme } from 'flowbite-react';"}],"quickstart":{"code":"import { useState } from 'react';\nimport { Button, Modal, Flowbite } from 'flowbite-react';\nimport type { CustomFlowbiteTheme } from 'flowbite-react';\n\n// Custom theme example for demonstration\nconst customTheme: CustomFlowbiteTheme = {\n button: {\n 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'\n },\n modal: {\n content: {\n base: 'relative h-full w-full p-4 md:h-auto'\n }\n }\n};\n\nfunction App() {\n const [openModal, setOpenModal] = useState(false);\n\n return (\n \n
\n

Welcome to Flowbite React!

\n \n setOpenModal(false)} popup>\n Terms of Service\n \n
\n

\n With less than a month to go before the European Union enacts new consumer privacy laws,\n companies around the world are scrambling to update their data governance policies.\n

\n

\n The European Union’s General Data Protection Regulation (GDPR) goes into effect on May 25,\n 2018, and is meant to ensure a common set of data rights in the European Union.\n

\n
\n \n \n \n \n \n \n
\n \n );\n}\n\nexport default App;\n","lang":"typescript","description":"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."},"warnings":[{"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.","message":"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.","severity":"gotcha","affected_versions":"<1.0.0"},{"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.","message":"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.","severity":"breaking","affected_versions":">=0.12.11"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=0.12.17"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"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.","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.","error":"TypeError: Cannot read properties of undefined (reading 'tailwindConfig')"},{"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.","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.","error":"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined."},{"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.","cause":"The `flowbite-react` package is not installed or not correctly resolved by your module bundler.","error":"Module not found: Error: Can't resolve 'flowbite-react'"}],"ecosystem":"npm"}