Flowbite

If you love the clean, “utility-first” approach of Tailwind CSS — but find yourself repeatedly recreating common user-interface pieces like buttons, modals, navbars or dropdowns — Flowbite might just be the tool you’ve been waiting for. Flowbite bundles a large collection of ready-made, stylish, and responsive UI components built with Tailwind, so instead of spending time styling and aligning elements, you can simply plug in a component and get going.

Flowbite also comes with support for interactive components and built-in JavaScript that powers dynamic UI elements like dropdowns, modals, date-pickers and more — giving you a polished, modern user experience without reinventing the wheel.

For developers and designers alike, this means you can move faster, stay consistent, and build interfaces that both look good and feel smooth — whether you’re putting together a simple landing page or a full-blown web application.

Installation

Link to official installation: https://daisyui.com/docs/install/

@plugin "flowbite/plugin";

We are calling plugin from esm.sh. This means that you can also call it as

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

you are done.

Installation Note:

Even if plugin is called “flowbite” you need to call it by adding “flowbite/plugin” as there are the files are. Otherwise you will be pointing to the wrong location and it will not be called properly.

Installation Note Javascript:

You will need to load javascript as well if you need to use interactive components such as accordion.

Link to the JS usage

Tailwind CSS Configuration:

https://flowbite.com/docs/customize/configuration

You will need to add theme configuration exaple:

@theme {
    /* main text color */
    --color-body: var(--color-stone-600);
    --color-body-subtle: var(--color-stone-500);

    /* text heading colors */
    --color-heading: var(--color-stone-900);

    /* used for custom brand colors */
    --color-fg-brand-subtle: var(--color-stone-200);
    --color-fg-brand: var(--color-stone-950);
    --color-fg-brand-strong: var(--color-stone-900);

    --font-sans: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-body: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-mono: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace';

    --spacing-custom: 10px;

    --breakpoint-xs: 30rem;
    --breakpoint-2xl: 100rem;
    --breakpoint-3xl: 120rem;
}