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.

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 i flowbite
  1. Require Flowbite as a plugin inside the tailwind.config.js file:
module.exports = {

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

}
  1. Include the main JavaScript file to make interactive elements work:
<script src="../path/to/flowbite/dist/flowbite.js"></script>
  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"
    ]

}

If you use Webpack or other bundlers you can also import it like this:

import 'flowbite';

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 rel="stylesheet" href="https://unpkg.com/flowbite@1.5.3/dist/flowbite.min.css" />

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

<script src="https://unpkg.com/flowbite@1.5.3/dist/flowbite.js"></script>

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.

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.

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.