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.
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
Most Flowbite React components are named exports.
import { Button } from 'flowbite-react';
Flowbite React is primarily designed for ESM environments. Nested components like Modal.Header are accessed as properties of the main export.
import { Modal } from 'flowbite-react';
The 'Flowbite' component acts as a context provider for theming and configuration, often mistakenly sought under a generic 'ThemeProvider' name.
import { Flowbite } from 'flowbite-react';
TypeScript type for extending or customizing the default Flowbite theme.
import type { CustomFlowbiteTheme } from 'flowbite-react';
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;
Upgrade
Version history
Breaking-change detection hasn't run for this library yet.
Audit
Security & dependencies
CVE tracking and dependency tree are planned for a later release.