# flowbite-react

> Official React components built for Flowbite and Tailwind CSS

Latest version **0.12.17** (published 2026-02-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install flowbite-react
pnpm add flowbite-react
yarn add flowbite-react
bun add flowbite-react
```

Provides the command `flowbite-react`.

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.12.17 |
| Published | 2026-02-09 |
| First published | 2022-02-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 13 |
| Unpacked size | 3.6 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 2150 |
| Maintainers | rluders, zoliszogyenyi, tulup-conner, sutusebastian |
| Keywords | design-system, flowbite, flowbite-react, react, tailwind, tailwindcss, tailwind-css |

## Links

- npm: https://www.npmjs.com/package/flowbite-react
- Repository: https://github.com/themesberg/flowbite-react
- Homepage: https://flowbite-react.com
- Issues: https://github.com/themesberg/flowbite-react/issues
- npm.io page: https://npm.io/package/flowbite-react

## Dependencies (13)

- [klona](https://npm.io/package/klona.md) 2.0.6
- [chokidar](https://npm.io/package/chokidar.md) 4.0.3
- [debounce](https://npm.io/package/debounce.md) 3.0.0
- [oxc-parser](https://npm.io/package/oxc-parser.md) 0.112.0
- [@iarna/toml](https://npm.io/package/@iarna/toml.md) 2.2.5
- [comment-json](https://npm.io/package/comment-json.md) 4.5.1
- [deepmerge-ts](https://npm.io/package/deepmerge-ts.md) 7.1.5
- [magic-string](https://npm.io/package/magic-string.md) 0.30.21
- [@floating-ui/core](https://npm.io/package/@floating-ui/core.md) 1.7.4
- [tailwind-merge-v2](https://npm.io/package/tailwind-merge-v2.md) npm:tailwind-merge@2.6.1
- [tailwind-merge-v3](https://npm.io/package/tailwind-merge-v3.md) npm:tailwind-merge@3.4.0
- [@floating-ui/react](https://npm.io/package/@floating-ui/react.md) 0.27.17
- [package-manager-detector](https://npm.io/package/package-manager-detector.md) 1.6.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.12.17 (latest) — 2026-02-09
- 0.7.0-beta.6 (beta) — 2023-11-26
- 0.6.1-beta (0.6.1-beta) — 2023-09-09
- 0.12.16 — 2026-01-07
- 0.12.15 — 2025-12-28
- 0.12.14 — 2025-12-15
- 0.12.13 — 2025-12-09
- 0.12.12 — 2025-12-08
- 0.12.11 — 2025-12-08
- 0.12.10 — 2025-10-27
- 0.12.9 — 2025-09-08
- 0.12.8 — 2025-09-01
- 0.12.7 — 2025-08-11
- 0.12.6 — 2025-08-05
- 0.12.5 — 2025-07-28
- … 109 more at https://npm.io/package/flowbite-react/versions

## README

<div align="center">
  <h1>Flowbite React</h1>
  <p><em>⚠️ This is a pre-release version - please note that APIs may change before the final release</em></p>
  <p>
    Build websites faster with components built on React and Tailwind CSS
  </p>
  <p>
    <a href="https://codecov.io/gh/themesberg/flowbite-react">
      <img src="https://codecov.io/gh/themesberg/flowbite-react/branch/main/graph/badge.svg?token=wnw40SeY4k"/>
    </a>
    <a href="https://discord.com/invite/4eeurUVvTy">
      <img src="https://img.shields.io/discord/902911619032576090?color=%237289da&label=Discord" alt="Discord">
    </a>
    <a href="https://www.npmjs.com/package/flowbite-react">
      <img src="https://img.shields.io/npm/dt/flowbite-react.svg" alt="Total Downloads">
    </a>
    <a href="https://badge.fury.io/js/flowbite-react">
      <img alt="Latest release" src="https://badge.fury.io/js/flowbite-react.svg">
    </a>
    <a href="https://flowbite.com/getting-started/license/">
      <img src="https://img.shields.io/badge/license-MIT-blue" alt="License">
    </a>
  </p>
</div>

---

### Flowbite React is an open-source collection of UI components built with React and Tailwind CSS utility classes that you can use as a starting point for your user interfaces and websites

## Documentation

Browse the components at [flowbite-react.com](https://flowbite-react.com/).

Learn more about Flowbite at [Flowbite docs](https://flowbite.com/docs/getting-started/introduction/).

## Getting started

Learn how to get started with `Flowbite React` and leverage the interactive React components built with `Tailwind CSS`.

### Using the CLI

You can set up Flowbite React using the CLI in two ways:

#### 1. Create a new project

Create a new Flowbite React application using popular React frameworks and technologies:

```bash
npx create-flowbite-react@latest
```

The CLI will prompt for the directory name, what template to use, and if it should initialize a new git repository.

For more details about how [`create-flowbite-react`](https://www.npmjs.com/package/create-flowbite-react) works, visit the package page.

#### 2. Setup in an existing project

To add Flowbite React to an existing project, run:

```bash
npx flowbite-react@latest init
```

This will set up all necessary dependencies and configurations in your existing project.

### Framework Integration Guides

Follow our official integration guides to set up Flowbite React with your preferred framework or technology stack:

- [AdonisJS](https://www.flowbite-react.com/docs/guides/adonisjs)
- [Astro](https://www.flowbite-react.com/docs/guides/astro)
- [Blitz.js](https://www.flowbite-react.com/docs/guides/blitzjs)
- [Bun](https://www.flowbite-react.com/docs/guides/bun)
- [ESBuild](https://www.flowbite-react.com/docs/guides/esbuild)
- [Farm](https://www.flowbite-react.com/docs/guides/farm)
- [Gatsby](https://www.flowbite-react.com/docs/guides/gatsby)
- [Laravel](https://www.flowbite-react.com/docs/guides/laravel)
- [Meteor.js](https://www.flowbite-react.com/docs/guides/meteorjs)
- [Modern.js](https://www.flowbite-react.com/docs/guides/modernjs)
- [Next.js](https://www.flowbite-react.com/docs/guides/nextjs)
- [Parcel](https://www.flowbite-react.com/docs/guides/parcel)
- [React Router](https://www.flowbite-react.com/docs/guides/react-router)
- [React Server](https://www.flowbite-react.com/docs/guides/react-server)
- [RedwoodJS](https://www.flowbite-react.com/docs/guides/redwoodjs)
- [Remix](https://www.flowbite-react.com/docs/guides/remix)
- [Rsbuild](https://www.flowbite-react.com/docs/guides/rsbuild)
- [Rspack](https://www.flowbite-react.com/docs/guides/rspack)
- [TanStack Router](https://www.flowbite-react.com/docs/guides/tanstack-router)
- [TanStack Start](https://www.flowbite-react.com/docs/guides/tanstack-start)
- [Vike](https://www.flowbite-react.com/docs/guides/vike)
- [Vite](https://www.flowbite-react.com/docs/guides/vite)
- [Waku](https://www.flowbite-react.com/docs/guides/waku)
- [Webpack](https://www.flowbite-react.com/docs/guides/webpack)

## Components

**Note: Some components from the vanilla Flowbite library are not yet available in Flowbite React.**

<table>
  <tr>
    <td width="33.3333%">Accordion</td>
    <td width="33.3333%">Alert</td>
    <td width="33.3333%">Avatar</td>
  </tr>
  <tr>
    <td width="33.3333%">
        <a href="https://flowbite-react.com/docs/components/accordion">
            <img alt="React Accordion" src="https://flowbite.s3.amazonaws.com/github/accordion.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-react.com/docs/components/alert">
            <img alt="React Alert" src="https://flowbite.s3.amazonaws.com/github/alerts.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-react.com/docs/components/avatar">
            <img alt="React Avatar" src="https://flowbite.s3.amazonaws.com/github/avatar.jpg">
        </a>
    </td>
  </tr>
  <tr>
    <td width="33.3333%">Banner</td>
    <td width="33.3333%">Badge</td>
    <td width="33.3333%">Breadcrumb</td>
  </tr>
  <tr>
    <td width="33.3333%">
        <a href="https://flowbite-react.com/docs/components/banner">
            <img alt="React Banner" src="https://flowbite.s3.amazonaws.com/github/banner.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-react.com/docs/components/badge">
            <img alt="React Badge" src="https://flowbite.s3.amazonaws.com/github/badge.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-react.com/docs/components/breadcrumb">
            <img alt="React Breadcrumb" src="https://flowbite.s3.amazonaws.com/github/breadcrumbs.jpg">
        </a>
    </td>
  </tr>
  <tr>
    <td width="33.3333%">Button</td>
    <td width="33.3333%">Button group</td>
    <td width="33.3333%">Card</td>
  </tr>
  <tr>
    <td width="33.3333%">
        <a href="https://flowbite-react.com/docs/components/button">
            <img alt="React Button" src="https://flowbite.s3.amazonaws.com/github/buttons.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-react.com/docs/components/button-group">
            <img alt="React Button group" src="https://flowbite.s3.amazonaws.com/github/button-group.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-react.com/docs/components/card">
            <img alt="React Card" src="https://flowbite.s3.amazonaws.com/github/cards.jpg">
        </a>
    </td>
  </tr>
  <tr>
    <td width="33.3333%">Carousel</td>
    <td width="33.3333%">Datepicker</td>
    <td width="33.3333%">Dropdown</td>
  </tr>
  <tr>
    <td width="33.3333%">
        <a href="https://flowbite-react.com/docs/components/carousel/">
            <img alt="React Carousel" src="https://flowbite.s3.amazonaws.com/github/carousel.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-react.com/docs/components/datepicker">
            <img alt="React Datepicker" src="https://flowbite.s3.amazonaws.com/github/datepicker.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-react.com/docs/components/dropdown">
            <img alt="React Dropdown" src="https://flowbite.s3.amazonaws.com/github/dropdown.jpg">
        </a>
    </td>
  </tr>
  <tr>
    <td width="33.3333%">Footer</td>
    <td width="33.3333%">Forms</td>
    <td width="33.3333%">List group</td>
  </tr>
  <tr>
  <td width="33.3333%">
        <a href="https://flowbite-react.com/docs/components/footer">
            <img alt="React Footer" src="https://flowbite.s3.amazonaws.com/github/footer.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-react.com/docs/components/forms">
            <img alt="React Forms" src="https://flowbite.s3.amazonaws.com/github/input-field.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-react.com/docs/components/list-group">
            <img alt="React List group" src="https://flowbite.s3.amazonaws.com/github/list-group.jpg">
        </a>
    </td>
  </tr>
  <tr>
    <td width="33.3333%">Modal</td>
    <td width="33.3333%">Navbar</td>
    <td width="33.3333%">Pagination</td>
  </tr>
  <tr>
   <td width="33.3333%">
        <a href="https://flowbite-react.com/docs/components/modal">
            <img alt="React Modal" src="https://flowbite.s3.amazonaws.com/github/modal.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-react.com/docs/components/navbar">
            <img alt="React Navbar" src="https://flowbite.s3.amazonaws.com/github/navbar.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-react.com/docs/components/pagination">
            <img alt="React Pagination" src="https://flowbite.s3.amazonaws.com/github/pagination.jpg">
        </a>
    </td>
  </tr>
  <tr>
    <td width="33.3333%">Progress bar</td>
    <td width="33.3333%">Rating</td>
    <td width="33.3333%">Sidebar</td>
  </tr>
  <tr>
  <td width="33.3333%">
        <a href="https://www.flowbite-react.com/docs/components/progress">
            <img alt="React Progress bar" src="https://flowbite.s3.amazonaws.com/github/progress.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-react.com/docs/components/rating">
            <img alt="React Rating" src="https://flowbite.s3.amazonaws.com/github/rating.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-react.com/docs/components/sidebar">
            <img alt="React Sidebar" src="https://flowbite.s3.amazonaws.com/github/sidebar.jpg">
        </a>
    </td>
  </tr>
  <tr>
    <td width="33.3333%">Spinner</td>
    <td width="33.3333%">Table</td>
    <td width="33.3333%">Tabs</td>
  </tr>
  <tr>
  <td width="33.3333%">
        <a href="https://flowbite-react.com/docs/components/spinner">
            <img alt="React Spinner" src="https://flowbite.s3.amazonaws.com/github/spinner.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-react.com/docs/components/table">
            <img alt="React Table" src="https://flowbite.s3.amazonaws.com/github/tables.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-react.com/docs/components/tabs">
            <img alt="React Tabs" src="https://flowbite.s3.amazonaws.com/github/tabs.jpg">
        </a>
    </td>
  </tr>
  <tr>
    <td width="33.3333%">Tooltip</td>
    <td width="33.3333%">Timeline</td>
    <td width="33.3333%">Toast</td>
  </tr>
  <tr>
    <td width="33.3333%">
        <a href="https://flowbite-react.com/docs/components/tooltip">
            <img alt="React Tooltip" src="https://flowbite.s3.amazonaws.com/github/tooltips.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-react.com/docs/components/timeline">
            <img alt="React Timeline" src="https://flowbite.s3.amazonaws.com/github/timeline.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-react.com/docs/components/toast">
            <img alt="React Toast" src="https://flowbite.s3.amazonaws.com/github/toast.jpg">
        </a>
    </td>
  </tr>
  <tr>
    <td width="33.3333%">Sticky Banner</td>
    <td width="33.3333%"></td>
    <td width="33.3333%"></td>
  </tr>
  <tr>
    <td width="33.3333%">
        <a href="https://flowbite-react.com/docs/components/banner">
            <img alt="React Banner" src="https://flowbite.s3.amazonaws.com/github/banner.jpg">
        </a>
    </td>
    <td width="33.3333%"></td>
    <td width="33.3333%"></td>
  </tr>
</table>

## Community

Get help or discuss the library with the community:

⌨️ [Discuss Flowbite on GitHub](https://github.com/themesberg/flowbite/discussions)

For casual conversations with other users using the library:

💬 [Join the Flowbite Discord Server](https://discord.gg/4eeurUVvTy)

## Contributing

We appreciate your interest in contributing! Please visit our [guide on contributing](https://github.com/themesberg/flowbite-react/blob/main/.github/CONTRIBUTING.md) to get started.

## Figma

For access to the Figma design files for our components, visit:

🎨 [Get access to the Figma design files](https://flowbite.com/figma/)

## Copyright and license

The Flowbite name and logos are trademarks of Bergside Srl.

📝 [Read about the licensing terms](https://flowbite.com/docs/getting-started/license/)
📀 [Brand guidelines and trademark usage agreement](https://flowbite.com/brand/)

---
_Source: https://npm.io/package/flowbite-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._