Skip to content

Flowbite

UI & GraphicsUI FrameworkJavaScript
Official docs ↗GitHub ↗

What it is

Flowbite is a component library built on top of Tailwind CSS that provides ready-to-use interactive UI components such as buttons, modals, dropdowns, and navigation menus.

Flowbite provides UI components that are styled with Tailwind CSS and include JavaScript for interactivity. Components include buttons, forms, modals, dropdowns, tooltips, tabs, and more.

Installation

npm install flowbite

Getting started

The smallest useful thing you can do with it, and what each part means.

Button usage
<button class='btn btn-primary'>Click Me</button>
Creates a primary-styled button using Flowbite utility classes.
Modal component
<button data-modal-target='myModal' class='btn btn-secondary'>Open Modal</button>
<div id='myModal' class='modal hidden'>
  <div class='modal-content'>
    <p>Modal content here</p>
  </div>
</div>
Opens a modal when the button is clicked using Flowbite's modal JS behavior.

Advanced usage

Where the library earns its place over a simpler alternative.

Dropdown menu
<button id='dropdownButton' data-dropdown-toggle='dropdownMenu'>Dropdown</button>
<div id='dropdownMenu' class='hidden'>
  <a href='#'>Option 1</a>
  <a href='#'>Option 2</a>
</div>
Creates a dropdown menu toggled via Flowbite's JavaScript.
Tooltip example
<button data-tooltip-target='tooltipExample'>Hover me</button>
<div id='tooltipExample' role='tooltip'>Tooltip text</div>
Shows a tooltip when hovering over the button, managed by Flowbite.
Tabs component
<ul class='tabs'>
  <li data-tabs-target='#tab1'>Tab 1</li>
  <li data-tabs-target='#tab2'>Tab 2</li>
</ul>
<div id='tab1' class='tab-content'>Content 1</div>
<div id='tab2' class='tab-content hidden'>Content 2</div>
Implements a tab navigation interface using Flowbite's tab behavior.

Errors and fixes

The failures you are most likely to hit, and what actually resolves them.

Component not interactive
Check that Flowbite JavaScript is loaded and data attributes are correctly set.
Modal or dropdown not showing
Ensure the target element exists and the data-modal-target/data-dropdown-toggle attribute matches the element ID.
CSS not applied
Verify Tailwind CSS and Flowbite CSS are correctly imported in your project.

Best practices

  • Import only the components you need to reduce bundle size.
  • Combine Flowbite with Tailwind CSS for consistent styling.
  • Use data attributes correctly for interactive components (modals, dropdowns, tabs).
  • Ensure Flowbite JS is included for interactive components to work.
  • Keep HTML structure as per Flowbite documentation for proper functionality.

Background

Why it exists, and what it was reacting to.

Flowbite was created to accelerate front-end development by providing Tailwind CSS-based components with pre-built interactivity using JavaScript. It aims to help developers build responsive and consistent interfaces quickly without writing all UI logic from scratch.

Related libraries

Others in UI & Graphics for JavaScript.

← All JavaScript librariesJavaScript guide