# Flowbite — Open-Source UI Components Built with Tailwind CSS

> A library of interactive UI components — modals, dropdowns, navbars, carousels, and more — designed for Tailwind CSS. Available as vanilla JS, React, Svelte, and Vue packages.

## Install

Save in your project root:

# Flowbite — Open-Source UI Components Built with Tailwind CSS

## Quick Use
```bash
npm install flowbite
```
```html
<!-- tailwind.config.js: add flowbite plugin -->
<script>
  module.exports = {
    plugins: [require("flowbite/plugin")],
    content: ["./node_modules/flowbite/**/*.js"],
  };
</script>

<!-- Use a modal component -->
<button data-modal-target="popup" data-modal-toggle="popup"
  class="bg-blue-700 text-white px-5 py-2.5 rounded-lg">
  Open Modal
</button>
<div id="popup" class="hidden fixed inset-0 z-50 ...">
  <div class="bg-white rounded-lg shadow p-6">
    <h3 class="text-lg font-semibold">Modal Title</h3>
    <p>Modal content here.</p>
  </div>
</div>
```

## Introduction
Flowbite provides a collection of pre-built UI components that use Tailwind CSS utility classes for styling and a lightweight JavaScript layer for interactivity. Instead of writing modal, dropdown, or tooltip logic from scratch, you drop in Flowbite components and get accessible, styled elements that match your Tailwind theme.

## What Flowbite Does
- Ships 50+ interactive components: modals, dropdowns, navbars, tooltips, datepickers, and more
- Uses Tailwind CSS classes for styling so components match your design system
- Provides a small vanilla JS runtime for toggle, dismiss, and dropdown behaviors
- Offers framework-specific packages for React, Svelte, and Vue
- Includes Figma design files that mirror the code components

## Architecture Overview
Flowbite components are HTML markup styled with Tailwind utility classes. Interactive behavior is handled by data attributes (like `data-modal-toggle`) that a JavaScript initialization script binds to event listeners. The JS layer uses Popper.js for positioning dropdowns and tooltips. Framework-specific packages wrap each component in idiomatic React/Svelte/Vue components with props-based configuration.

## Self-Hosting & Configuration
- Install the npm package and add the Flowbite plugin to your Tailwind config
- Include the Flowbite JS file or import it in your entry point for data-attribute initialization
- For React, install `flowbite-react` and import components directly as JSX
- Customize colors and spacing by extending your Tailwind theme — Flowbite inherits those values
- Use the Tailwind content path config to include Flowbite's JS files for class purging

## Key Features
- 50+ UI components covering common web application patterns
- Dark mode support via Tailwind's dark variant
- Full accessibility with ARIA attributes and keyboard navigation
- Framework bindings for React, Svelte, and Vue
- TypeScript support in framework-specific packages

## Comparison with Similar Tools
- **DaisyUI** — Tailwind component classes via a plugin; Flowbite uses data attributes and includes interactive JS
- **shadcn/ui** — copy-paste Radix-based React components; Flowbite provides multi-framework support and a larger component set
- **Headless UI** — unstyled accessible primitives; Flowbite includes full styling and visual design
- **Bootstrap** — standalone CSS framework; Flowbite builds on Tailwind CSS and inherits its utility-first approach

## FAQ
**Q: Does Flowbite require Tailwind CSS?**
A: Yes. All components are styled with Tailwind utility classes and expect a configured Tailwind project.

**Q: Can I use it without a JavaScript framework?**
A: Yes. The vanilla JS package works with plain HTML via data attributes for interactivity.

**Q: Is Flowbite free?**
A: The core library is MIT-licensed. Flowbite Pro offers additional premium templates and blocks as a paid product.

**Q: Does it work with Next.js?**
A: Yes. The `flowbite-react` package works with Next.js App Router and Server Components by marking interactive components as client-side.

## Sources
- https://github.com/themesberg/flowbite
- https://flowbite.com

---
Source: https://tokrepo.com/en/workflows/bdf004e4-4517-11f1-9bc6-00163e2b0d79
Author: AI Open Source