Flowbite is a utility-first CSS framework for building responsive, modern web interfaces. It is built on top of Tailwind CSS and provides a set of pre-designed components and interactive elements that can be easily integrated into web projects.
UI Components
Flowbite provides a variety of pre-designed UI components such as buttons, cards, modals, and more. These components are built with Tailwind CSS classes and can be easily customized.
<button class="btn btn-primary">Button</button>Interactive Elements
Flowbite includes interactive elements like dropdowns, modals, and tooltips that are built with JavaScript to enhance user experience. These elements are easy to integrate and customize.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>Responsive Design
Flowbite is designed to be fully responsive, allowing developers to create layouts that adapt to different screen sizes. It uses Tailwind CSS's responsive utility classes to achieve this.
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="col-span-1">Content 1</div>
<div class="col-span-1">Content 2</div>
<div class="col-span-1">Content 3</div>
<div class="col-span-1">Content 4</div>
</div>Bootstrap is a popular CSS framework that provides a wide range of pre-designed components and responsive grid system. It is similar to Flowbite in terms of providing ready-to-use UI elements, but it is not built on top of Tailwind CSS.
Bulma is a modern CSS framework based on Flexbox. It offers a variety of responsive components and utilities similar to Flowbite. However, it does not use Tailwind CSS and has its own set of design principles.
Material-UI is a popular React component library that implements Google's Material Design. It provides a wide range of pre-designed components and is similar to Flowbite in terms of offering interactive elements, but it is specifically designed for React applications.
Build websites even faster with components on top of Tailwind CSS
For full documentation, visit flowbite.com.
Flowbite can be included as a plugin into an existing Tailwind CSS project and it is supposed to help you build websites faster by having a set of web components to work with built with the utility classes from Tailwind CSS.
Make sure that you have Node.js and Tailwind CSS installed.
npm install flowbite
tailwind.config.js file:module.exports = {
plugins: [
require('flowbite/plugin')
]
}
tailwind.config.js file:module.exports = {
content: [
"./node_modules/flowbite/**/*.js"
]
}
<script src="../path/to/flowbite/dist/flowbite.js"></script>
The quickest way to get started working with Flowbite is to simply include the CSS and JavaScript into your project via a CDN service such as UNPKG or CDNJS (content delivery networks).
Require the following minified stylesheet inside the head tag:
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.8.0/flowbite.min.css" rel="stylesheet" />
And include the following javascript file before the end of the body tag:
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.8.0/flowbite.min.js"></script>
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.
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.
<button data-modal-target="defaultModal" data-modal-toggle="defaultModal" class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">
Toggle modal
</button>
<!-- Main modal -->
<div id="defaultModal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative w-full max-w-2xl max-h-full">
<!-- Modal content -->
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<!-- Modal header -->
<div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
Terms of Service
</h3>
<button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="defaultModal">
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
<span class="sr-only">Close modal</span>
</button>
</div>
<!-- Modal body -->
<div class="p-6 space-y-6">
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
</p>
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
</p>
</div>
<!-- Modal footer -->
<div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
<button data-modal-hide="defaultModal" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">I accept</button>
<button data-modal-hide="defaultModal" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">Decline</button>
</div>
</div>
</div>
</div>
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.
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 bg-opacity-50 dark:bg-opacity-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.
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
Generally speaking, all of the components have an interface definition that you can use whenever you create a new object to make sure that you're using the correct types of parameters and methods.
When creating a new modal you can set the ModalInterface as the main type:
const modal: ModalInterface = new Modal($modalElement, modalOptions);
Flowbite also supports type definitions for the options object so if you want to set the placement of the modal based on types, here's how you would do that:
const modalOptions: ModalOptions = {
placement: 'top-right'
}
const modal: ModalInterface = new Modal($modalElement, modalOptions);
Learn more about Flowbite and TypeScript in the quickstart guide.
The awesome open-source community also built and currently maintains the following standalone libraries for React, Vue, Svelte, and Angular:
We also wrote integration guides for the following front-end frameworks and libraries:
Flowbite has a great integration with most of the back-end frameworks because it relies on vanilla JavaScript:
Flowbite is an open source collection of UI components built with the utility classes from Tailwind CSS that you can use as a starting point when coding user interfaces and websites.
| Alerts | Badge | Breadcrumbs |
|
|
|
| Buttons | Button group | Cards |
|
|
|
| Dropdown | Forms | List group |
|
|
|
| Typography | Modal | Tabs |
|
|
|
| Navbar | Pagination | Timeline |
|
|
|
| Progress bar | Tables | Toast |
|
|
|
| Tooltips | Datepicker | Spinner |
|
|
|
| Footer | Accordion | Sidebar |
|
|
|
| Carousel | Avatar | Rating |
|
|
|
| Input Field | File Input | Search Input |
|
|
|
| Select | Textarea | Checkbox |
|
|
|
| Radio | Toggle | Range Slider |
|
|
|
| Floating Label | Mega Menu | Skeleton |
|
|
|
| KBD (keyboard) | Drawer (offcanvas) | Popover |
|
|
|
| Video | Heading | Paragraph |
|
|
|
| Blockquote | Image | List |
|
|
|
| Link | Text | Horizontal line (HR) |
|
|
|
| Speed Dial | Stepper | Indicators |
|
|
|
| Bottom Navigation | Sticky Banner | Gallery (Masonry) |
|
|
|
| Jumbotron | Device mockups | |
|
|
If you need the Figma files for the components you can check out our website for more information:
🎨 Get access to the Figma design files
Check out Flowbite Blocks to get access to over 330+ website sections coded in Tailwind CSS and Flowbite:
Start using over 430+ free and open-source collection of solid and outline SVG icons built for Tailwind CSS and with support for Figma and JSX (React):
Get access to all premium features including the Figma design system, access to all Flowbite Block sections and a dashboard UI interface:
If you want to create even better Flowbite pages, learn design fundamentals from Teach Me Design - Enhance UI, a book that covers color theory, typography, UI and UX so you can make the most to implement the Flowbite Ecosystem!
If you need help or just want to discuss about the library join the community on Github:
⌨️ Discuss about Flowbite on GitHub
For casual chatting with others using the library:
💬 Join the Flowbite Discord Server
Video tutorials and presentations using Flowbite:
🎥 Subscribe to our YouTube channel
The Flowbite name and logos are trademarks of Bergside Inc.
FAQs
The most popular library of interactive components built with Tailwind CSS
The npm package flowbite receives a total of 161,455 weekly downloads. As such, flowbite popularity was classified as popular.
We found that flowbite demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Elastic’s return to open source with the AGPL license has been met with skepticism, as many developers see it as a strategic move rather than a genuine effort to restore user trust and freedoms.
Security News
A new "revival hijack" supply chain attack targets deleted Python packages, with an estimated 22K packages at risk. Socket can detect and block hijacked packages that have added malicious code.
Product
We're introducing a new Analytics feature in the Socket dashboard so you can view changes in your organization's and repositories' alerts over time.