Flowbite is an open-source library of web components built with the utility-first classes from Tailwind CSS. It also includes interactive elements such as dropdowns, modals, datepickers.
Tailwind CSS is a framework that I've been using a lot lately in my web-related projects because of how fast it is to build the pages using the utility-first classes.
One problem that I have encountered, however, is that the framework does not include a basic set of components to get started with. So I had to build them over and over for every project.
But then I found a component library based on Tailwind CSS called Flowbite. It comes with the most commonly used web components, such as buttons, navigation bars, cards, form elements, and more which are conveniently built with the utility classes from Tailwind CSS.
Today I want to show you how you can get started with this library and start building websites even faster with Tailwind CSS and the components from Flowbite.
The project is available on Github and it is open source under the MIT License.
Getting started with Flowbite
First of all you need to understand how Flowbite works. This library is not another framework. Rather, it is a set of components based on Tailwind CSS that you can just copy-paste from the documentation.
You can check out the quickstart guide to explore the elements by including the CDN files into your project. But if you want to build a project with Flowbite I recommend you to follow the build tools steps so that you can purge and minify the generated CSS.
For a faster configuration we will include everything using a CDN.
How to include Flowbite and Tailwind CSS via CDN
Let's start by including the CSS file inside the
head tag of your HTML:
<link rel="stylesheet" href="https://unpkg.com/@themesberg/flowbite@latest/dist/flowbite.min.css" />
If you've followed these two steps correctly you should now have both Tailwind CSS and Flowbite included in your project and the components from Flowbite should all work now.
Exploring the components from Flowbite
The next step is to check out the components from the documentation which are all built using the utility classes from Tailwind CSS.
You can find anything from alerts, buttons, and badges all the way to navigation bars, modals, dropdown menus, and even datepickers.
Here's the full list of components:
- Button group
- List group
- Progress bar
You can check out the all of the components on the homepage and then it will be accessible from every page of the documentation.
All you need to do now is to copy-paste the element of your choice inside your project and then use them any way you see fit.
Let's create a user authentication page using the components from Flowbite and the utility classes from Tailwind CSS to show you the workflow of this library.
Here's how it will look in the end:
How to build a user authentication page with Flowbite
The first requirement is to include Flowbite into the HTML page that you're going to work with either via CDN or NPM. I already showed you how to do that in this article, so I'll assume you've already done that.
Let's first build the wrapper element to which we will later add the logo and the main card element.
This element ensures that everything will be centered horizontally and vertically on larger screens.
Let's now add the logo which is good for branding and which users can also click on to go back to the homepage.
Next we should create the main card element that comes just after the logo that we've added and also add the image inside the card.
If you've followed the steps correctly you should have an empty authentication card with an image inside it and the logo above.
How to use the Flowbite Tailwind CSS form element
This is where Flowbite comes into play, as we need to build a form element which includes two text input fields, a checkbox, and a button. We don't have to build it ourselves because we can use the Tailwind CSS form elements from Flowbite.
Let's add the following title and the form element inside the second
div element from the card.
The final result should look like this:
Congratulations! You've built your first page using both Tailwind CSS and Flowbite. Imagine how much it'll help you with your projects not having to build all of the commonly used web components over and over again.
I hope that this tutorial has helped you understand what Flowbite is about and how you can use it to power and speed up your Tailwind CSS development flow even more.
There's a video about trying out Flowbite on YouTube that you can check out if you want to see an experienced developer working with the library.
There's also a pro version of Flowbite out there for those who want upgrade their Tailwind CSS toolkit even more, as it includes a Tailwind CSS Figma design kit that you can use to prototype your website design before actually coding it.
You'll also receive a lot of useful application UI, marketing UI, and e-commerce pages that can help you get started with your projects even faster. You can check out this comparison table to better understand the differences between the open-source and pro version of Flowbite.