Flowbite React - UI Component Library

Flowbite React is a free and open-source UI component library based on the core Flowbite components and built with React components and interactivity handling.

This library features hundreds of interactive elements such as navbars, dropdowns, modals, and sidebars all handled by React and based on the utility classes from Tailwind CSS.

Getting started#

Learn how to get started with Flowbite React and start leveraging the interactive React components coupled with Flowbite and Tailwind CSS.

Setup Tailwind CSS#

Install Tailwind CSS:

npm i autoprefixer postcss tailwindcss
npx tailwindcss init -p

Point Tailwind CSS to files you have className=".." in:

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}" /* src folder, for example */],
  theme: {
    extend: {},
  },
  plugins: [],
};

Add Tailwind CSS to a CSS file:

@tailwind base;
@tailwind components;
@tailwind utilities;

Install Flowbite React#

1. Run the following command to install flowbite-react:

npm i flowbite-react

2. Add the Flowbite plugin to tailwind.config.js, and include content from flowbite-react:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    // ...
    "node_modules/flowbite-react/lib/esm/**/*.js",
  ],
  plugins: [
    // ...
    require("flowbite/plugin"),
  ],
};

Try it out#

How you use Flowbite React depends on your project setup. In general, you can just import the components you want to use from flowbite-react and use them in a React .jsx or .tsx file:

import { Button } from "flowbite-react";

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

Next steps#

Dark mode

If you want to add a dark mode switcher to your app, you can follow the dark mode guide.

Customization

If you want to customize Flowbite React component, you can follow the theme guide.

Contributing

If you want to contribute to Flowbite React, you can follow the contributing guide.