design

Flowbite-vue: Streamline Design

Name: Flowbite-vue: Streamline Design
Author: themesberg

Get pre-built Vue 3 components for Flowbite and Tailwind CSS. For founders building with Vue.

948 stars141 forksTypeScriptQuality 9/10Updated 6/27/2026100% free · open source

What it does

Flowbite-vue provides pre-built Vue 3 components for Flowbite and Tailwind CSS, allowing founders to quickly build custom UI components for their applications

Install / run

npm install flowbite-vue

When to use it

•You're building a Vue 3 application and want to use Flowbite's UI components
•You need a set of pre-designed UI components that work seamlessly with Tailwind CSS
•You want to speed up your development process by using existing, customizable components

Quick start

1Import the FlowbiteVue plugin in your main.js file: import { FlowbiteVue } from 'flowbite-vue'
2Install Tailwind CSS if you haven't already: npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
3Configure Tailwind CSS to work with Flowbite-vue by creating a tailwind.config.js file
4Use a pre-built component in your Vue code, such as the Navbar component: <FlowbiteNavbar />
5Customize the component's props to fit your application's needs

Ready-to-paste prompt

<template> <FlowbiteNavbar :burgers='false' /> </template> <script> import { FlowbiteNavbar } from 'flowbite-vue' export default { components: { FlowbiteNavbar } } </script>

Heads up: Make sure you have the correct version of Vue (Vue 3) installed, as Flowbite-vue is not compatible with older versions of Vue

Saves to your device