How to Use Flowbite Components in WordPress

Flowbite is a library of UI components built with Tailwind CSS: navbars, modals, dropdowns, accordions, tabs, date pickers and more. Unlike pure-CSS libraries, it ships the JavaScript that makes interactive components work. If you keep rebuilding the same dropdown or modal on every WordPress site, Flowbite gives you a tested version to copy and adapt.

How Flowbite works

Flowbite has two parts:

1. A Tailwind plugin that adds the styles and theme variables its components use.
2. A JavaScript file that powers interactive components through data- attributes (for example data-modal-toggle, data-dropdown-toggle).

You copy a component’s HTML from the Flowbite docs into your page, and it works once both parts are loaded.

Step 1: add the Tailwind plugin

In Tailwind v4, load it with @plugin. The important detail: the plugin path is flowbite/plugin, not just flowbite, because that’s where the plugin file lives.

@plugin "flowbite/plugin";

With Winden, which compiles Tailwind inside WordPress without Node.js, load it from esm.sh:

@plugin "https://esm.sh/flowbite/plugin/";

Step 2: define the theme variables

Recent Flowbite versions style components with semantic color variables. Define them in your @theme, for example:

@theme {
  --color-body: var(--color-stone-600);
  --color-heading: var(--color-stone-900);
  --color-fg-brand: var(--color-stone-950);
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}

Map them to your own brand colors, ideally the ones you defined in Winden’s Wizzard, so Flowbite components match the rest of the site.

Step 3: load the JavaScript

Static components (buttons, cards, badges) work with CSS only. For accordions, dropdowns, modals and tabs you also need Flowbite’s script. Follow the “include via CDN” instructions in Flowbite’s quickstart, and load the script in the footer. In WordPress you can enqueue it from your theme, or add it as a footer script with a code manager such as Scripts Organizer, limited to the pages that use interactive components.

Step 4: use components

Copy a component from Flowbite’s docs and paste it into a Custom HTML block in Gutenberg, or into your builder. In Bricks you can even paste the HTML as real Bricks elements. For components you reuse a lot, turn them into your own block, so editors only change the text: see how to create a custom Gutenberg block without React.

daisyUI or Flowbite?

• daisyUI is CSS-only component classes (btn, card) with themes. Short markup, no JavaScript. See daisyUI in WordPress.
• Flowbite gives you full HTML components plus the JavaScript for interactive ones.

Many sites use daisyUI-style classes for the basics and a few Flowbite components for interactive parts.