Tailwind CSS components and interactive elements

  • By Themesberg
  • Last update: Jan 8, 2023
  • Comments: 16

Flowbite - Tailwind CSS components
Build websites even faster with components on top of Tailwind CSS

Discord Total Downloads Latest Release Licenese


For full documentation, visit flowbite.com.

Getting started

Flowbite can be included as a plugin into an existing Tailwind CSS project and it is supposed to help you build websites faster by having a set of web components to work with built with the utility classes from Tailwind CSS.

๐Ÿ‘‰ See all components

Require via NPM

Make sure that you have Node.js and Tailwind CSS installed.

  1. Install Flowbite as a dependency using NPM by running the following command:
npm i @themesberg/flowbite
  1. Require Flowbite as a plugin inside the tailwind.config.js file:
module.exports = {

    plugins: [

  1. Include the main JavaScript file to make interactive elements work:
<script src="../path/to/@themesberg/flowbite/dist/flowbite.bundle.js"></script>

If you use Webpack or other bundlers you can also import it like this:

import '@themesberg/flowbite';

Include via CDN

The quickest way to get started working with FlowBite is to simply include the CSS and JavaScript into your project via CDN.

Require the following minified stylesheet inside the head tag:

<link rel="stylesheet" href="https://unpkg.com/@themesberg/[email protected]/dist/flowbite.min.css" />

And include the following javascript file before the end of the body element:

<script src="https://unpkg.com/@themesberg/[email protected]/dist/flowbite.bundle.js"></script>


If you need help or just want to discuss about the library join the community on Github:

Discuss about Flowbite on GitHub

For casual chatting with others using the library:

Join the Flowbite Discord Server


If you need the Figma files for the components you can check out our website for more information:

Get access to the Figma design files




  • 1

    flowbite not working with NextJS


    • We have installed flowbite to our react project by following recommended steps via npm. We added it to tailwind config etc
    • The code is just not working properly. The effects (e.g. tooltip) do not show on hover. If we try to import it directly (via import '@themesberg/flowbite'; we get an error document not found.
    • Is it correct to inject the script just with <script src="../path/to/@themesberg/flowbite/dist/flowbite.bundle.js"></script>? Is the path/to just a placeholder for another custom local path?
    • We are using NextJS. I think the issue could be related to SSR but I am not sure. Any pointers?
  • 2

    modal open with javascript, not close correctly

    Describe the bug if open modal with javascript, i can't close modal with javascript helper or data-modal-toggle=""

    To Reproduce Steps to reproduce the behavior:

    1. Go to official site: https://flowbite.com/docs/components/modal/#methods
    2. open modal with javascript from chrome console
    3. new Modal(document.getElementById('defaultModal'), null).show();
    4. Close modal with (X) icon inside modal, not close modal!
    5. no javscript error

    Expected behavior close correctly modal

    Screenshots image

    Desktop (please complete the following information):

    • OS: Ubuntu
    • Browser chrome
    • Version 1.4.1

    Smartphone (please complete the following information):

    • Device: [e.g. iPhone6]
    • OS: [e.g. iOS8.1]
    • Browser [e.g. stock browser, safari]
    • Version [e.g. 22]

    Additional context Add any other context about the problem here.

  • 3

    Flowbite with Turbo on rails7

    Hi! ๐Ÿ‘‹

    Firstly, thanks for your work on this project! ๐Ÿ™‚

    I got Flowbite working together with Turbo in my Rails 7 project. The original issue was that the javascript worked until the first turbo navigation was made and stoped working after that.

    According to Turbo's documentaction this happened because Flowbite uses DOMContentLoaded event to install JS behavior, but this event only fires once, in response to the initial page load. In order to install the JS behavior on every page change I replaced DOMContentLoaded to turbo:load event in dist/flowbite.js. turbo:load event fires on every page change.

    I used patch-package to patch [email protected] for the project I'm working on.

    Here is the diff that solved my problem:

    diff --git a/node_modules/flowbite/dist/flowbite.js b/node_modules/flowbite/dist/flowbite.js
    index 92e66fc..3659e36 100644
    --- a/node_modules/flowbite/dist/flowbite.js
    +++ b/node_modules/flowbite/dist/flowbite.js
    @@ -32,7 +32,7 @@ const rotateAccordionIcon = accordionHeaderEl => {
    -document.addEventListener('DOMContentLoaded', () => {
    +document.addEventListener('turbo:load', () => {
       document.querySelectorAll('[data-accordion]').forEach(function (accordionEl) {
         const accordionId = accordionEl.getAttribute('id');
         const collapseAccordion = accordionEl.getAttribute('data-accordion');
    @@ -109,7 +109,7 @@ const toggleCollapse = (elementId, show = true) => {
    -document.addEventListener('DOMContentLoaded', () => {
    +document.addEventListener('turbo:load', () => {
       // Toggle target elements using [data-collapse-toggle]
       document.querySelectorAll('[data-collapse-toggle]').forEach(function (collapseToggleEl) {
         var collapseId = collapseToggleEl.getAttribute('data-collapse-toggle');
    @@ -150,7 +150,7 @@ const toggleModal = (modalId, show = true) => {
     window.toggleModal = toggleModal;
    -document.addEventListener('DOMContentLoaded', () => {
    +document.addEventListener('turbo:load', () => {
       document.querySelectorAll('[data-modal-toggle]').forEach(function (modalToggleEl) {
         var modalId = modalToggleEl.getAttribute('data-modal-toggle');
         var modalEl = document.getElementById(modalId);
    @@ -172,7 +172,7 @@ document.addEventListener('DOMContentLoaded', () => {
     /***/ 454:
     /***/ (() => {
    -document.addEventListener('DOMContentLoaded', () => {
    +document.addEventListener('turbo:load', () => {
       document.querySelectorAll('[data-tabs-toggle]').forEach(function (tabsToggleEl) {
         const tabsToggleElementsId = tabsToggleEl.getAttribute('id');
         const tabsToggleElements = document.querySelectorAll('#' + tabsToggleElementsId + ' [role="tab"]');
    @@ -2208,7 +2208,7 @@ var popper_createPopper = /*#__PURE__*/popperGenerator({
     ;// CONCATENATED MODULE: ./src/components/dropdown.js
    -document.addEventListener('DOMContentLoaded', () => {
    +document.addEventListener('turbo:load', () => {
       // Toggle dropdown elements using [data-dropdown-toggle]
       document.querySelectorAll('[data-dropdown-toggle]').forEach(function (dropdownToggleEl) {
         const dropdownMenuId = dropdownToggleEl.getAttribute('data-dropdown-toggle');
    @@ -2256,7 +2256,7 @@ var tabs = __webpack_require__(454);
     var modal = __webpack_require__(508);
     ;// CONCATENATED MODULE: ./src/components/tooltip.js
    -document.addEventListener('DOMContentLoaded', () => {
    +document.addEventListener('turbo:load', () => {
       // Toggle dropdown elements using [data-dropdown-toggle]
       document.querySelectorAll('[data-tooltip-target]').forEach(function (tooltipToggleEl) {
         const tooltipEl = document.getElementById(tooltipToggleEl.getAttribute('data-tooltip-target'));

    This issue body was partially generated by patch-package.

  • 4

    Javascript doesn't work in Vue3

    Hey there, I am using a fresh project with tailwind2, flowbite 1.1.1 and vue3. The backend stack ist laravel 8 (php8) with inertia.js. If I'm creating a modal inside a Vue component, then I can't open/toggle the model (data-modal-toggle="default-modal" is set to the button) . It only works, if i move the button and modal out of the component, into the final html generated site (with Blade Template Engin). It affects not only the modal, but also the alert dismiss button and basically everything that need flowbite javascript.

    Has someone the same issue and know a workaround?

  • 5

    Dropdowns don't work in React if rendered after page load

    Describe the bug When using Flowbite with React, if the page updates after first load to include a dropdown that wasn't originally present then the dropdown doesn't open when clicked.

    I assume this applies to all JavaScript but I've not tried any others yet.

    There are no console errors and nothing obvious at all in any logs. It just only ever works if the Dropdown HTML was present in the first render, and doesn't work if it was only present after an update.

    My assumption is that the event listeners are bound to the HTML as it is when the JavaScript first runs, and doesn't use any mechanism to bind to changes that happen later.

    Desktop (please complete the following information):

    • OS: macOS 11.6.1
    • Browser Firefox
    • Version 96.0.3
  • 6

    Not able to set up Flowbite on SvelteKit

    Describe the bug

    I'm trying to install Flowbite on SvelteKit. When I run npm run dev, I get an error:

    document is not defined
    ReferenceError: document is not defined
        at Object.745 (/Users/shinichiokada/Svelte/flowbite/node_modules/@themesberg/flowbite/dist/flowbite.bundle.js:17:1)
        at __webpack_require__ (/Users/shinichiokada/Svelte/flowbite/node_modules/@themesberg/flowbite/dist/flowbite.bundle.js:138:41)
        at /Users/shinichiokada/Svelte/flowbite/node_modules/@themesberg/flowbite/dist/flowbite.bundle.js:151:16
        at /Users/shinichiokada/Svelte/flowbite/node_modules/@themesberg/flowbite/dist/flowbite.bundle.js:2245:3
        at Object.<anonymous> (/Users/shinichiokada/Svelte/flowbite/node_modules/@themesberg/flowbite/dist/flowbite.bundle.js:2247:12)
        at Module._compile (node:internal/modules/cjs/loader:1101:14)
        at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
        at Module.load (node:internal/modules/cjs/loader:981:32)
        at Function.Module._load (node:internal/modules/cjs/loader:822:12)
        at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:190:29)

    To Reproduce

    Install SvelteKit:

    npm init [email protected] flowbite

    Install Tailwind Css and Flowbite:

    cd flowbite
    npm install
    npx [email protected] tailwindcss
    npm i @themesberg/flowbite

    Update the TailwindCSS config.

    In the tailwind.config.cjs file:

    const config = {
      content: [
      theme: {
        extend: {},
      plugins: [
    module.exports = config;

    Adding flowbite to routes/__layout.svelte:

      import "../app.css";
      import "@themesberg/flowbite";
    <slot />

    Expected behavior

    No error.

    Screenshots image

    Desktop (please complete the following information):

    • OS: macOS v12.1
    • Browser chrome, brave
  • 7

    Modal does not open when switching between pages until you refresh the page

    in mobile screen when the page load for the first time and you click the button to open the modal it does open, but after you go to another page and try to open another modal it does not open and you should refresh the page again and again every time you go to another page.

  • 8

    Modal doesn't close when clicking background or hitting esc button

    Describe the bug

    Common expected modal functionality is to click outside of the modal to close the modal. Same goes for hitting the esc button.

    To Reproduce Steps to reproduce the behavior:

    1. Go to: https://flowbite.com/docs/components/modal/
    2. Open any modal
    3. Click outside of the modal or hit the 'esc' button on the keyboard

    Expected behavior I expect the modal to close on either of those. The modal doesn't. I have to click the close button instead.


    • OS: OSX
    • Browser: Chrome & Firefox
    • Version: FF99


    • Device: iPhone
    • OS: iOS 15.4.1
    • Browser: Safari

    Additional context I've replicated this on my local dev and on the Flowbite demo site.

  • 9

    JS elements not working in Webpack with Tailwind v3

    Describe the bug I have a fresh installation of Tailwindcss 3 and latest version of Flowbite installed via NPM and using Webpack 5 as my bundler. Flowbite styles are working perfectly but all JS powered elements aren't working it seems.

    To Reproduce Steps to reproduce the behavior:

    1. Check out https://github.com/Dizzzlectic/flowbite-test
    2. Install dependencies (npm install)
    3. Run the project (npm run)
    4. Try to dismiss any of the alerts

    Expected behavior JS elements should be working, but they don't seem to be

    Desktop (please complete the following information):

    • OS: [e.g. iOS] Windows 11
    • Browser [e.g. chrome, safari] Firefox
    • Version [e.g. 22] 95.0.2

    Additional context Add any other context about the problem here.

  • 10

    Dropdown offset

    At the moment the dropdown offset is hardcoded to [0, 10].

    It would be great to add support for a new data attribute like data-dropdown-offset="0,10". Or possibly data-dropdown-offset-x="0" and data-dropdown-offset-y="10". Easier to parse in the code but I personally prefer the first option.

    Meanwhile, the workaround I found was to add Tailwind classes like !-bottom-2 to override the position.

    Let me know your thoughts. Thanks for the great library!

  • 11

    default integration doesn't seem to work for nuxt js

    Is your feature request related to a problem? Please describe. the methods that are described in the default quickstart guide doesn't seem to work for nuxt.js v2.15. please elaborate it.

    Describe the solution you'd like a proper guide on how to integrate with some document /video on how to integrate with different frontend frameworks. (in my case vue js applications)

  • 12

    Node Express EJS Template Engine can not get Flowbite JavaScript

    Describe the bug I am using Flowbite in my Node Express project where I'm using Flowbite as Tailwind Plugin. But, Node Express EJS Template Engine can not get Flowbite JavaScript. It can not dismiss the alert element, and more where JS needs to work.

    To Reproduce Steps to reproduce the behavior:

    1. Install Flowbite, add "./views/**/*.ejs" in tailwind config file, add require('flowbite/plugin') in tailwind config file
    2. add flowbite JavaScipr file in ejs footer
    3. added flowbite component
    4. compile tailwind and JavaScript is not working

    Expected behavior When clicking in Alert components close dismissal, the component should be removed from the view file

    Screenshots image image image image image Screenshot_4

    Desktop (please complete the following information):

    • OS: Windows 10
    • Browser: Chrome
    • Version: 108
  • 13

    Accordion, Dropdown, Modal, dst. not working in jquery laravel, how to solve it?

    function updateResults(results) { // Clear the previous search results $('#search-results').empty();

                        // Loop through the search results
                        results.forEach(function(result) {
                            // Create the HTML for the search result
                            var resultHTML = `<h2 id="accordion-catalog-head-${result.id}">
                            <button type="button"
                                class="flex items-center justify-between w-full py-5 font-medium text-left border-b text-gray-500 border-gray-200 dark:border-gray-700 dark:text-gray-400"
                                data-accordion-target="#accordion-catalog-body-${result.id}" aria-expanded="true"
                                <span data-accordion-icon
                                    class="w-6 h-6 rotate-180 shrink-0 flex justify-center items-center">
                                    <i class="fas fa-angle-down"></i>
                        <div id="accordion-catalog-body-${result.id}" class="hidden"
                            <div class="py-5 font-light border-b border-gray-200 dark:border-gray-700">
                                <p class="mb-2 text-gray-500 dark:text-gray-400">${result.information}</p>
                            // Append the search result HTML to the search results container
  • 14

    Can we use Windi CSS instead of Tailwind?

    Is your feature request related to a problem? Please describe. I've just learned about Windi CSS and it looks like a superior alternative to Tailwind. Most importantly (to me anyway): it offers better performance (for developers and users). (BTW, an interesting read: https://antfu.me/posts/reimagine-atomic-css)

    Do you think that Flowbite can be used together with Windi (instead of Tailwind)? I don't know if/which modifications that would require. Maybe it just works out of the box, but if so I don't know if it would have hidden side effects.

    Describe the solution you'd like Allow Flowbite to work with Windi CSS. ๐Ÿฅณ

    Describe alternatives you've considered Keep on using Tailwind. ๐Ÿ˜‰

  • 15

    More resilient select field regarding width

    Is your feature request related to a problem? Please describe.

    As the select form field is tagged with w-full, it is usually large:


    However, if we remove this class, the select's caret now overlaps the content:


    It would be convenient if we could remove w-full and still have a good-looking select.

    Describe the solution you'd like

    After we remove w-full, we get something like:


    In other words, the select field is large enough so the caret never overlaps the content, whatever the selected option.

    Describe alternatives you've considered


    • Use a fixed minimum width
    • Pad options with a few &nbsp; (not proud of this one)
  • 16

    flowbite version 1.5.5: CSP problem

    Describe the bug With version 1.5.5 , i have a problem with CSP (Content Security Policy):

    Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' fonts.googleapis.com". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution.

    With the same code and flowbite version 1.5.4, all is ok (no problem with CSP).

    To Reproduce I have a simple application (just header and slider, no javascript, just 'import flowbite'). I use webpack (with laravel-mix) With version 1.5.4, all is ok. Example: https://inwayvideo.com/flowbitecsp1/

    With the same code, I just change version of flowbite with version 1.5.5 There is a problem with CSP.

    Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' fonts.googleapis.com". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution.

    Example: https://inwayvideo.com/flowbitecsp2/ Use chrome and open console to show message

    Code is here (in a zip file): http://inwayvideo.com/flowbitecsp/flowbiteBugCSP.zip read readme.txt to build demo

    Expected behavior No message for CSP

    Desktop (please complete the following information):

    • Browser: same problem with chrome 108 / edge 108 / firefox 108
    • Version of flowbite : version 1.5.5