flowbite-ui

Flowbite — Tailwind CSS UI Components

Flowbite is a Tailwind CSS plugin + component library. Components are HTML + Tailwind utility classes. Interactive components (modal, dropdown, accordion, etc.) use data attributes or the JavaScript API.

Targets Tailwind CSS v4 + Flowbite latest (NPM). All components support dark mode via dark: variants.

Installation (NPM — Tailwind v4)

npm install flowbite

resources/css/app.css (Laravel) or input.css:

@import "tailwindcss";
@import "flowbite/src/themes/default";

@plugin "flowbite/plugin";
@source "../node_modules/flowbite";

@custom-variant dark (&:where(.dark, .dark *));

Include JS — pick one:

// Bundler (Vite/Webpack) — auto-binds data attributes
import 'flowbite';

<!-- CDN -->
<script src="https://cdn.jsdelivr.net/npm/flowbite/dist/flowbite.min.js"></script>

Two ways to use interactive components

1. Data attributes (preferred)

Add attributes to HTML; Flowbite JS handles events automatically.

<button data-modal-target="my-modal" data-modal-toggle="my-modal">Open</button>
<div id="my-modal" tabindex="-1" aria-hidden="true" class="hidden fixed inset-0 z-50 ...">
  <button data-modal-hide="my-modal">Close</button>
</div>

2. JavaScript API (programmatic)

import { Modal } from 'flowbite';

const modal = new Modal(document.getElementById('my-modal'), {
  placement: 'center',
  backdrop: 'dynamic',
  onShow: () => {},
  onHide: () => {},
});

modal.show();
modal.hide();
modal.toggle();

Framework SPA re-init

After DOM updates (Vue, React, Livewire, Alpine), re-bind data attributes:

import { initFlowbite } from 'flowbite';

onMounted(() => initFlowbite());   // Vue
// or after Livewire navigate / Alpine x-init

Or init specific components: initModals(), initDropdowns(), initAccordions(), etc.

Instance manager (v2.0+)

Access instances created via data attributes: