Pricing

Flowbite - Quickstart

Get started with Flowbite by including it into your project using NPM or CDN

Flowbite is a library of components built on top of the utility-classes from Tailwind CSS and it also includes a JavaScript file that makes interactive elements works, such as modals, dropdowns, and more. Learn how to get started by following this quickstart guide.

Getting started #

Flowbite can be easily integrated into your project through NPM. It functions as a plugin for Tailwind CSS and offers both a data attributes interface and a JavaScript API for powering interactive UI components.

Require via NPM #

Make sure that you have Node.js and Tailwind CSS installed.

  1. Install Flowbite as a dependency using NPM by running the following command:
npm install flowbite
  1. Require Flowbite as a plugin inside the tailwind.config.js file:
module.exports = {

    plugins: [
        require('flowbite/plugin')
    ]

}
  1. Additionally to your own content data you should add flowbite to apply the classes from the interactive elements in the tailwind.config.js file:
module.exports = {

    content: [
        "./node_modules/flowbite/**/*.js"
    ]

}
  1. Require the JavaScript code that powers the interactive elements before the end of your <body> tag:
<script src="../path/to/flowbite/dist/flowbite.min.js"></script>

Learn more about the Flowbite JavaScript API and functionalities in the JavaScript section.

Include via CDN #

The quickest way to get started working with FlowBite is to simply include the CSS and JavaScript into your project via CDN.

Require the following minified stylesheet inside the head tag:

<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css" rel="stylesheet" />

And include the following JavaScript file before the end of the body element:

<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>

Please remember that the best way to work with Tailwind CSS and Flowbite is by purging the CSS classes.

Bundled JavaScript #

One of the most popular way of using Flowbite is to include the bundled Javascript file which is UMD ready using a bundler such as Webpack or Parcel which makes sure that all of the data attributes and functionality will work out-of-the-box.

You can directly import the main JavaScript file inside your bundled app-bundle.js file like this:

import 'flowbite';

This file has access to all of the components and it automatically applies event listeners to the data attributes.

Data attributes #

The preferred way to use the interactive UI components from Flowbite is via the data attributes interface which allows us to add functionality via the HTML element attributes and most of the examples on our documentation applies this strategy.

For example, to set up a modal component all you need to do is use data-modal-target and data-modal-{toggle|show|hide} to toggle, show, or hide the component by clicking on any trigger element.

Init functions #

You can also use the init functions to set up the event listeners yourself. Here’s an example how you can do it with Vue or Nuxt:

<script setup>
import { onMounted } from 'vue'
import { initFlowbite } from 'flowbite'

// initialize components based on data attribute selectors
onMounted(() => {
    initFlowbite();
})
</script>

<template>
    // Modal HTML markup with data attributes from Flowbite
</template>

The initFlowbite function sets up all of the init functions for dropdowns, modals, navbars, tooltips and so on to hook onto the data attributes. Alternatively, you can also initialise each component category class separately with initDropdowns or initModals.

You can view more examples by browsing the components from Flowbite.

ESM and CJS #

Flowbite also offers an API for using the components programmatically and it supports both CJS and ESM for JavaScript which can be helpful if you need to expand the default capabilities of the data attributes interface and get access to function callbacks.

Here’s an example how you can import and create a new Modal component inside JavaScript:

import { Modal } from 'flowbite'

const $modalElement = document.querySelector('#modalEl');

const modalOptions = {
    placement: 'bottom-right',
    backdrop: 'dynamic',
    backdropClasses: 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40',
    onHide: () => {
        console.log('modal is hidden');
    },
    onShow: () => {
        console.log('modal is shown');
    },
    onToggle: () => {
        console.log('modal has been toggled');
    }
}

const modal = new Modal($modalElement, modalOptions);

modal.show();

Check out the JavaScript behaviour section of each component’s page to learn how you can use this.

TypeScript #

Flowbite supports type declarations for the interactive UI components including object interfaces and parameter types. Check out the following examples to learn how you can use types with Flowbite.

Additionally to our code above, we will now import some relevant types from the Flowbite package, namely the ModalOptions and ModalInterface:

import { Modal } from 'flowbite'
import type { ModalOptions, ModalInterface } from 'flowbite'

// other code

Learn more about Flowbite and TypeScript in the quickstart guide.

Tailwind CSS 2.0 #

Flowbite works with the 2.x version of Tailwind CSS.

Tailwind CSS 3.0 #

Feel free to upgrade to version 3 of Tailwind CSS as there are no breaking changes when using the components from Flowbite.

WindiCSS #

Flowbite also works with WindiCSS. Just include the WindiCSS version of the Flowbite plugin inside the windi.config.js file.

plugins: [
    require('flowbite/plugin-windicss')
],

Figma design system #

The components from Flowbite are first conceptualized and designed in Figma using the latest features such as variants, auto-layout, grids, responsive layouts, and more.

Learn more by checking out Flowbite’s Figma design system and start designing your Tailwind CSS projects before actually coding them.

TypeScript #

If you want to use types for the interactive elements you can do that because since v1.6.0 Flowbite also supports TypeScript.

Learn how to install Tailwind CSS and Flowbite with TypeScript.

React #

If you’re using React as a front-end library you can also use the components from Flowbite including the interactive ones such as the dropdowns, modals, and tooltips as long as you install Tailwind CSS and Flowbite in an existing project.

Learn how to install Tailwind CSS and Flowbite with React.

Next.js #

If you’re using React as a front-end library and Next.js as a framework you can also use the components from Flowbite React such as the modals, dropdowns, and navbars to speed up your development time coupled with the utility classes from Tailwind CSS.

Learn how to install Tailwind CSS and Flowbite with Next.js and React.

Vue.js #

The components from Flowbite can also be used any new or existing Vue 3 projects as long as you install Tailwind CSS and Flowbite.

Learn how to install Tailwind CSS and Flowbite with Vue.js.

Nuxt #

If you’re using Vue 3 as a front-end library and Nuxt as a framework you can also use the components from Flowbite Vue such as the modals, dropdowns, and navbars to speed up your development time coupled with the utility classes from Tailwind CSS.

Learn how to install Tailwind CSS and Flowbite with Nuxt and Vue 3.

Laravel #

If you’re running a Laravel application you can easily set up Tailwind CSS and Flowbite and start developing user interfaces based on the utility-first classes and components.

Learn how to install Tailwind CSS and Flowbite with Laravel.

Svelte #

If you’re using a Svelte application you can install a standalone Flowbite Svelte library and start developing modern websites using the components from Flowbite and the utility classes from Tailwind CSS.

Learn how to install Tailwind CSS and Flowbite with Svelte.

Ruby on Rails #

If you’re using a Ruby on Rails project you can install Tailwind CSS with Flowbite and start building web pages using the utility-first classes and the interactive UI compnonents from Flowbite.

Learn how to install Tailwind CSS and Flowbite with Ruby on Rails.

Django #

Check out the Django integration guide with Tailwind CSS and Flowbite to set up all technologies and start developing even faster using the UI components from Flowbite.

Learn how to install Tailwind CSS and Flowbite with Django.

Flask #

Check out the Flask integration guide with Tailwind CSS and Flowbite to set up all technologies and start developing with a micro framework combined with the UI components from Flowbite.

Learn how to install Tailwind CSS and Flowbite with Flask.

Github repository #

The source files are also available to be cloned or downloaded from the official FlowBite Github repository. Don’t forget to give it a star if you appreciate the project.