flowbite

Flowbite is a component library that layers ready-made, interactive UI elements — modals, dropdowns, tabs, carousels, datepickers, and more — on top of Tailwind CSS utility classes. Instead of hand-building interactivity for every project, developers add a handful of data-* attributes to markup copied straight from the docs, and Flowbite’s bundled JavaScript wires up the show/hide/toggle behavior automatically.

Under the hood it ships as a Tailwind CSS plugin (registered via @plugin "flowbite/plugin" in Tailwind v4 projects) paired with a standalone TypeScript library exposing each component (Modal, Dropdown, Tabs, Carousel, etc.) as a class with its own options object, event callbacks, and public methods — so teams that want programmatic control aren’t limited to the data-attribute interface. It builds and ships in CJS, ESM, and UMD formats with full type declarations, and includes framework-specific initFlowbite() helpers for wiring components up inside React, Vue, Svelte, and other SPA frameworks where markup is client-rendered after the initial data-attribute scan would otherwise miss it.

The project has grown well beyond the core library into an ecosystem: a Figma design system, a companion Flowbite Blocks marketplace of prebuilt page sections, a dedicated icon set, and official React/Svelte/Vue ports — while the core flowbite npm package stays framework-agnostic and dependency-light (only @popperjs/core, flowbite-datepicker, and tailwindcss itself).

What You Get

• A Tailwind CSS plugin (@plugin "flowbite/plugin") plus prebuilt theme files (default, minimal, enterprise, playful, mono) that style every component out of the box
• 14+ interactive components — Accordion, Carousel, Collapse, Datepicker, Dial, Dismiss, Drawer, Dropdown, InputCounter, Modal, Popover, Tabs, Tooltip, CopyClipboard — each with its own options object and instance API
• A data-attribute interface (data-modal-toggle, data-dropdown-trigger, etc.) that wires up interactivity without writing any JavaScript
• A parallel class-based JavaScript/TypeScript API (new Modal(el, options)) with instance methods, event callbacks (onShow, onHide, onToggle), and full .d.ts type declarations
• CJS, ESM, and UMD builds plus a CDN-hosted minified bundle, so it drops into a plain <script> tag or a bundler-based project equally well
• Framework-agnostic initFlowbite() / per-component init*() functions for re-scanning the DOM after client-side rendering in React, Vue, Svelte, and similar SPA setups

Common Use Cases

• Adding a modal, drawer, or dropdown menu to a Tailwind CSS site without writing custom show/hide JavaScript
• Building an admin dashboard or marketing site quickly using Flowbite’s prebuilt component markup and matching Blocks library
• Wiring interactive Tailwind components into an existing SPA (React/Vue/Svelte) by calling initFlowbite() after route/component mounts
• Standardizing a design system across a Tailwind CSS codebase using one of Flowbite’s themeable variants (default, minimal, enterprise, playful, mono)
• Adding a date picker to a form via the bundled flowbite-datepicker component without pulling in a separate charting/date UI dependency

Under The Hood

Architecture Flowbite uses a flat, per-component module layout under src/components/<name>/, where each directory holds an index.ts class, an interface.ts contract, and a types.ts options shape — there’s no central registry beyond dom/instances.ts, a plain keyed-object store that tracks live component instances by DOM id. Data flow starts in src/index.ts, which wires a single window load event (via the tiny Events helper in dom/events.ts) to call each component’s init*() function; each of those scans the DOM for its data attributes and instantiates the matching class with a Default options object merged against user overrides. There’s no dependency injection or plugin system — every component is an independent class implementing a shared *Interface contract, self-registering into the instance store on construction. Because all 14 components route through that same Instances registry for lookup, override, and destroy, a change to its shape would ripple through every component at once.

Tech Stack The library is TypeScript compiled to both CJS and ESM via two tsc passes, then additionally bundled to UMD with Webpack 5 for the CDN build. Tailwind CSS v4 is a runtime dependency rather than just a dev tool, since Flowbite ships as a Tailwind plugin driven by @tailwindcss/cli; @popperjs/core handles positioning for Dropdown, Tooltip, and Popover, and flowbite-datepicker is vendored in as the Datepicker component. The documentation site runs on Hugo, a separate static-site pipeline from the library build, with its own theme CSS files (default, minimal, enterprise, playful, mono) built independently of the component code.

Code Quality No test files exist anywhere in the repository, and there’s no CI workflow beyond GitHub issue templates — behavior isn’t verified automatically. Error handling is defensive rather than typed: components default to no-op callbacks (onShow, onHide, onToggle) and emit console.warn for invalid instance lookups rather than throwing. Naming is consistent across components (*Interface/*Options/Default suffixes repeated everywhere), and TypeScript’s noImplicitAny plus ESLint and Prettier are configured, giving reasonable static coverage even in the absence of tests.

API Design Flowbite’s core differentiator is offering two parallel ways to use the same component: a zero-JavaScript data-attribute interface (data-modal-toggle, etc.) for markup-only usage, and a fully typed class-based API (new Modal(el, options)) with instance methods and callback hooks for programmatic control. Getting started requires minimal boilerplate — a single CDN <script> tag is enough for the data-attribute path — but composing custom behavior on the class API means learning each component’s own Options/Interface shape individually, since there’s no shared base class unifying option handling across the 14 components.