Flowbite - Open-source library of Tailwind CSS components | Product Hunt

Hey Product Hunt 👋

Thanks, @denic for hunting Flowbite.

So, what is Flowbite?

Flowbite is an open-source set of web components built on top of Tailwind CSS including interactive elements as well, such as dropdowns, date pickers, modals, and more.

This comes as a complementary solution to Tailwind's utility-first framework which does not include a base set of components that you can use right away.

How does Flowbite work?

Flowbite is essentially still just Tailwind CSS because all we do is that we built components using ONLY the utility classes from Tailwind CSS.

Of course, we also have a JavaScript file that you can optionally include if you want to be able to use more interactive elements, such as modals, dropdowns, date pickers, and more.

Why build Flowbite?

I've been using Tailwind CSS for quite some time now and it has been frustrating that I had to build the web components such as buttons, navigation bars, and more, over and over again.

So my team (@roberttanislav and @victor_cordos) and I decided to build a library of web components using only the utility classes from Tailwind CSS and write some custom vanilla JavaScript.

How can I get started with Flowbite?

It's fairly easy, you could even just copy-paste the components from the documentation right into your Tailwind CSS project, but to make sure that the other interactive elements work you should check out either the quick start guide or the build tools guide from the Flowbite documentation.

You can also view the video made by @florinpop1705 trying out Flowbite.

Do you have design files?

Yes, we do. Everything you see was first designed with Figma and we also made it open-source and you can duplicate it on the Figma community page.

Learn more about Flowbite, Figma, and Tailwind CSS here:

https://flowbite.com/figma/

Is there a Pro version as well?

Yes, there is one. We call it Flowbite Pro and it's basically a direct competitor to Tailwind UI as we also decided to build the Application UI, Marketing UI, and E-commerce equivalent.

The main difference is that we will support a Figma parity between the code and design (since Tailwind Labs decided to drop the Figma support) and instead of just giving away sections, we decided to also give the possibility to get the whole Application UI (dashboard layout) in one ZIP file to save you even more time.

Other than that, Flowbite Pro also features advanced chart, kanban, drag and drop file upload libraries, and more which Tailwind UI does not.

The list of advantages and differences will only increase in time as we will continue to develop both the base library and the pro version.

Thanks!