# flowbite-vue is the Flowbite component set, rebuilt in Vue 3

> flowbite-vue is the official Vue 3 component library for Flowbite and Tailwind CSS, and its value is that it takes a design system that already exists and gives it a Vue API rather than inventing a new one. The installation is two npm packages and one Tailwind plugin, and the documentation site admits in its first line that it is not yet finished, which is worth knowing before you plan a project around it.

**themesberg/flowbite-vue** — Official Vue 3 components built for Flowbite and Tailwind CSS

- Repository: https://github.com/themesberg/flowbite-vue
- Website: https://flowbite-vue.com
- Stars: 954 · Forks: 139
- Language: TypeScript
- License: MIT
- Published: 2026-10-20 · Updated: 2026-10-20 · Language: en
- Canonical page: https://hysenlabs.com/projects/themesberg-flowbite-vue

## A Vue rendering of an existing design system

The repository describes itself as the official Vue 3 components built for Flowbite and Tailwind CSS, and the readme puts it more precisely, an open source collection of UI components built in Vue with utility classes from Tailwind CSS that you can use as a starting point for user interfaces and websites. That last clause, a starting point, is the honest framing. Flowbite itself is a set of Tailwind components, and this project renders that set with Vue components rather than with the markup Flowbite's own JavaScript would produce. The consequence is that the visual result matches Flowbite, and the behavioural result is a Vue component with props and events, which is a different thing from a Tailwind plugin. It is worth being clear that the licence is MIT, the project is by themesberg, the same group behind Flowbite, and the site is flowbite-vue.com.

## Two packages and one plugin line in the Tailwind config

The setup is short. You set up flowbite the normal way and install flowbite-vue from npm, and the readme asks for Node.js and Tailwind CSS to be in place first. The install is one command:

```bash
npm i flowbite flowbite-vue
```

Then flowbite has to be registered as a Tailwind plugin, and the tailwind configuration has to be told to scan the component package:

```javascript
module.exports = {
  content: [
    ...,
    'node_modules/flowbite-vue/**/*.{js,jsx,ts,tsx}'
  ],
  plugins: [..., require('flowbite/plugin')],
};
```

The two halves of that snippet are the whole installation, and both are easy to get wrong in a way that fails quietly. The plugin is what gives the components their Flowbite behaviour, and the content entry is what makes Tailwind generate the utility classes those components use, because Tailwind only emits classes it finds in files it has been told to scan.

## The content array is the step that produces a blank page

It is worth spending a paragraph on that content entry, because it is the most common failure with a component library that ships pre-styled markup. Tailwind CSS generates its utility classes at build time and only for the classes it finds in the files listed in the content array. A component library that lives in node_modules is not in your own source tree, so unless the package path is added, the classes the component asks for are never emitted and the component renders unstyled. The glob the readme gives covers JavaScript, JSX, TypeScript and TSX files in the package, and the entry sits in the same array as your own sources. If you are diagnosing an empty page in a fresh install, that line is the first thing to check, and the readme also points at the Flowbite documentation for the underlying setup.

## The component set, and the gaps in it

The components are presented as a gallery with a screenshot and a link for each, and the list reads alphabetically in the table. It covers alerts, badge, breadcrumbs, buttons, a button group, cards, a dropdown, forms, a list group, typography, a modal, tabs, a navbar, pagination, a timeline, a progress bar, tables and a toast. That is a decent foundation for an application interface, and it is clearly a selection rather than a complete set, since a full admin panel or marketing site usually wants a sidebar, a tooltip, a date picker, a combobox and a file input, none of which appear in the list. The components are also grouped rather than uniform, with a button group and a list group as their own entries, which tells you the library is organised around the Flowbite set rather than around a general purpose design system of its own.

## The documentation says it is not finished, and points you elsewhere

The first line of the documentation section is the sentence that should shape your expectations, that the documentation for flowbite-vue is not yet finished. It then redirects in two directions, to flowbite.com to browse the components, and to the Flowbite documentation to learn how Flowbite itself works. That is a reasonable arrangement for a library that mirrors another one, since the component documentation is largely the same, but it does mean the readme is not a manual you can follow end to end. The project does have its own site at flowbite-vue.com with a page per component, and the readme is careful to distinguish the two, telling you to browse the components on the Flowbite site and to learn about Flowbite in the Flowbite docs. The site itself is built with VitePress, and the `docs/` directory in the tree is where it lives, with a Nuxt guide at `docs/pages/nuxt.md`.

## The Nuxt path, and a build that generates its own component list

For Nuxt users the readme points at a guide for auto-import setup, and the package manifest shows what that involves, an export of a `./nuxt` entry point with a module declaration and a types file, alongside a script called `generate:nuxt-components` that runs a Node script to generate the component list, and that script runs before both the package build and the types build. So the Nuxt module is not a hand written list of components, it is generated from the source during the build, which is the arrangement that keeps auto-imports working when components are added. The packaging also has a `./components/*/types` export, so a consumer can reach the type definitions of a single component rather than only the whole library, and an explicit `./index.css` export for the stylesheet, which matters for a Tailwind based library where the CSS is part of the public surface. The build itself runs Vite twice, once with the normal configuration and once with the Nuxt one.

## Packaging and the signal in the version numbers

The manifest is small and modern, with the package published as an ES module, a UMD build as the main entry, an ES module build as the module field, the types entry pointing at a generated declaration file, and the exports map listing the root, the per component types, the stylesheet and the Nuxt module. The published files are the distribution directory and the sources, and the package is marked as having no side effects, which is what lets a bundler drop it when nothing is imported from it. The versions are the part to read carefully. The listed releases are 0.4.0 from 2026-07-27, 0.3.0 from 2026-07-12 and 0.2.3 from 2026-02-04, and a zero major version in a component library is the conventional signal that the API may still move between minor versions, so a team that adopts it should expect to read the changelog when upgrading rather than to bump the number and hope. The last push to the repository was on 2026-10-13, and the tree also carries a `Procfile`, a `static.json`, a `CHANGELOG.md` and a `.node-version` file.

## Conclusion

flowbite-vue suits a Vue team that has already chosen Flowbite as its Tailwind component set and wants the same look without hand porting the markup, and it suits a Nuxt project, since the package ships a Nuxt module with auto-import setup. It is a poor fit if you want a comprehensive component library, since the set is around twenty components and the documentation is explicitly unfinished, and it is a poor fit if you are on Vue 2. Before you build on it, check three things: which components you actually need against the list, because the library is young and the version numbers are still in the zero series, that you add the package to the content array in your Tailwind configuration, since without that the utility classes the components use are never generated, and the version you pin, with 0.4.0 published on 2026-07-27 and the last push to the repository on 2026-10-13.

## FAQ

### What is flowbite-vue?

The official Vue 3 components built for Flowbite and Tailwind CSS, an open source collection of UI components built in Vue with Tailwind utility classes. It is MIT licensed, published on npm as flowbite-vue, and documented at flowbite-vue.com.

### How do I install flowbite-vue?

With `npm i flowbite flowbite-vue`, then register flowbite as a Tailwind plugin in your tailwind.config.js and add the package to the content array so Tailwind generates the classes the components use. The readme asks for Node.js and Tailwind CSS to be installed first, and points at a separate Nuxt guide for auto-import setup.

### Which components does flowbite-vue provide?

Alerts, badge, breadcrumbs, buttons, button group, cards, dropdown, forms, list group, typography, modal, tabs, navbar, pagination, timeline, progress bar, tables and toast. The documentation notes that the documentation for flowbite-vue is not yet finished and points to the Flowbite site to browse the components.

### Does flowbite-vue work with Nuxt?

Yes, with a guide for auto-import setup and a dedicated Nuxt export in the package manifest that ships a module and its types. The component list the module uses is generated by a script during the build, which runs before both the package build and the types build.

### Is flowbite-vue stable enough to depend on?

The version numbers are still in the zero series, with 0.4.0 published on 2026-07-27 after 0.3.0 in July 2026 and 0.2.3 in February 2026, and the last push to the repository on 2026-10-13. A zero major version in a component library usually signals that the API can still move between minor releases, so read the changelog when upgrading.

## Sources

- [License: MIT](https://github.com/themesberg/flowbite-vue/blob/main/LICENSE)
- [Project website](https://flowbite-vue.com)
- [README](https://github.com/themesberg/flowbite-vue/blob/main/README.md)
- [Releases](https://github.com/themesberg/flowbite-vue/releases)
- [themesberg/flowbite-vue on GitHub](https://github.com/themesberg/flowbite-vue)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/themesberg-flowbite-vue