Figma UI kit built for integration with Tailwind CSS

Build UI interfaces and simplify the process of integrating into live websites with Tailwind CSS

DESIGNED AND DEVELOPED BY THEMESBERG™

Loved by freelancers and companies all across the globe

Solid foundation for any project

"FlowBite provides a robust set of design tokens and components based on the popular Tailwind CSS framework. From the most used UI components like forms and navigation bars to the whole app screens designed both for desktop and mobile, this UI kit provides a solid foundation for any project.

Designing with Figma components that can be easily translated to the utility classes of Tailwind CSS is a huge timesaver!"

Eugene FedorenkoEugene FedorenkoLead designer at Wildbit

Mindblowing workflow and variants

"As someone who mainly designs in the browser, I've been a casual user of Figma, but as soon as I saw and started playing with FlowBite my mind was 🤯.

Everything is so well structured and simple to use (I've learnt so much about Figma by just using the toolkit).

Aesthetically, the well designed components are beautiful and will undoubtedly level up your next application."

Amrit NagiAmrit NagiFounder at TailwindToolbox

Advanced features for Figma designers

"This is an excellent product, the components are very well structured, you can change their type, state and size without losing time.

Also, you can design a ready-made website layout in a short time. I highly recommend it for designers who love Figma."

Elisa PaduraruElisa PăduraruDesigner at Creative Tim

Efficient Collaborating

"This is a very complex and beautiful set of elements. Under the hood it comes with the best things from 2 different worlds: Figma and Tailwind.

You have many examples that can be used to create a fast prototype for your team."

Alexandru PăduraruAlexandru PăduraruManaging Partner at Creative Tim

Perfect choice for a SaaS application

"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."

Csaba KissiCsaba KissiCTO at Elerion ltd.

A must-have for designers

"Using FlowBite has been fantastic for my workflow. It made it really easy to create a very good looking project in no time.

Every designer should have this in their toolbox!"

Arnau RosArnau RosFreelance Designer

Integrate with Tailwind CSS

FlowBite is built around the utility classes available in the Tailwind CSS framework, which means that you can integrate a design built with this kit using Tailwind CSS without writing any extra HTML classes.

Fun fact: this landing page was also designed in FlowBite and coded with Tailwind CSS.

<ul class="space-y-2">
<li>
<ul class="grid grid-cols-10 h-7">
<li class="bg-red-900"></li>
<li class="bg-red-800"></li>
<li class="bg-red-700"></li>
<li class="bg-red-600"></li>
<li class="bg-red-500"></li>
<li class="bg-red-400"></li>
<li class="bg-red-300"></li>
<li class="bg-red-200"></li>
<li class="bg-red-100"></li>
<li class="bg-red-50"></li>
</ul>
<ul class="grid grid-cols-10 h-7">
<li class="bg-orange-900"></li>
<li class="bg-orange-800"></li>
<li class="bg-orange-700"></li>
<li class="bg-orange-600"></li>
<li class="bg-orange-500"></li>
<li class="bg-orange-300"></li>
<li class="bg-orange-200"></li>
<li class="bg-orange-100"></li>
<li class="bg-orange-50"></li>
</ul>
</li>
</ul>

27 hand-crafted pages

The structure of the pages available in Flowbite are set up using the auto layout feature from Figma, so that changing the order and width of columns and rows will be easy to do so.

Tailwind Figma Pages

Built for all devices

Responsive design is an important requirement to build accessible user interfaces and provide a high quality experience for your users. That is why we built all of the desktop, tablet, and mobile screen examples for the devices from FlowBite.

Mobile vs Desktop vs Tablet Market Share:

Mobile: 54.25%
Desktop: 42.9%
Tablet: 2.85%
Tailwind Figma Devices

Style guideline

The style guideline is the backbone of the Flowbite project, completely identical with the structure of the utility classes from Tailwind CSS. We've covered color styles, typography, avatars, shadows, and many more.

Avatars
Typography
Color styles
Shadows
Flowbite Style Guide

Figma variants

The variants feature from Figma is a great way to make development easier along the way by only having to select multiple style variants for a given component.

Most of the elements available in FlowBite have at least a couple of variants, such as for the buttons, forms, badges, tooltips, and many more.

Buttons
Forms
Badges
Progress bars
Tooltips
Tailwind Figma Variants

Auto Layout

The structure of the pages available in FlowBite are set up using the auto layout feature from Figma, so that changing the order and width of columns and rows will be easy to do so.

Tailwind Figma Auto-Layout

Roadmap

Flowbite is a project that will be maintained over the long term, that is why we have laid out the following roadmap for new features and additions. Ultimately, all Figma design files will be coded in Tailwind CSS.

Phase 1

Figma base project

  • Style guideline
  • Auto layout setup
  • UI components and variants
  • Application UI pages
  • Responsive interface for mobile and tablet devices

Application UI code in Tailwind

  • Tailwind CSS base project
  • Setup style guidelines
  • Code the UI elements
  • Code the Application UI pages
  • Responsive interface
  • Build documentation
  • Test for production mode and browsers
  • Optimize speed

Dark version

  • Build a dark version in Figma
  • Integrate the dark version in Tailwind CSS
  • Use Figma constraints and adaptive layout
Phase 2

Marketing UI design in Figma

  • Research and conceptualize sections and pages for marketing purposes (ie. landing pages, hero sections, pricing sections)
  • Build special UI components and variants
  • Create modular sections that can be later used to build the final pages
  • Build marketing UI example pages
  • Responsive interface for mobile and tablet devices

Marketing UI code in Tailwind

  • Code the new UI elements
  • Code the new marketing UI sections
  • Code the example pages
  • Responsive design based on Figma
  • Incorporate new UI elements and sections into the documentation
  • Test for production mode and browsers
  • Optimize speed
Phase 3

E-Commerce UI design in Figma

  • Research for high converting UI/UX e-commerce pages
  • Create unique e-commerce UI elements and variants
  • Build sections that will make up the main pages
  • Design example pages for a fully featured e-commerce website
  • Responsive interface with a special focus on mobile devices

E-Commerce UI code in Tailwind

  • Code the new UI elements based on the Figma design
  • Code the e-commerce sections
  • Code the e-commerce example pages
  • Responsive design for mobile and tablet devices
  • Integrate the new elements and sections into the documentation
  • Test for production mode and browsers
  • Optimize speed

* The blue highlighted area with the "check" sign means that the features have been finished and deployed, the "cog" sign means that we are actively working on it, and the "calendar" sign means that it has been scheduled.

Changelog

We keep the changelog public to show you that FlowBite is a well updated and maintained product. Read through the timeline of updates by browsing the changelog below.

## Version 1.0.0 - May 10th, 2021
Initial release files
## Version 1.0.1 - May 17th, 2021
Extra variants for the top bar component:
- colors: white, dark, blue, teal, purple, indigo, pink, red, green, gray
- dropdown: active/false
- search input: active/false
- breakpoints: mobile/tablet/desktop
- type: toggle button/default/centered + links/left + links/quick action button
Extra variants for the sidebar:
- colors: white, dark, blue, teal, purple, indigo, pink, red, green, gray
- type: default/contracted
- icons: true/false
New datepicker component and variants
Extra colors variants for the buttons
New sections, such as: pricing, pricing comparison table, FAQ, footers
Minor fixes

Choose the right plan for your business

Used by freelancer designers, developers, and companies all over the world

Figma files

Price
$129USD
Features
All Figma design assets
Lifetime access
Support from the authors
Use on unlimited projects
Free updates based on roadmap

Figma files + Tailwind CSS code

Price
$278$189USD
Features
All Figma design assets
Pre-order Tailwind CSS code
Lifetime access
Support from the authors
Use on unlimited projects
Free updates based on roadmap
Pre-order only extra 5 pages and UI elements
Have a team? View team pricing

Tailwind CSS code

Price
$149$119USD
Features
Fully coded in Tailwind CSS
Lifetime access
Support from the authors
Use on unlimited projects
Free updates based on roadmap
Pre-order only extra 3 pages and UI elements

Arrives on 10th of August, 2021

Free version

Get the free version from the Figma Community.

Get now

Frequently asked questions

Search for the questions that are frequently asked about FlowBite


What do you mean by "Figma assets"?

You will have access to download the full Figma project including all of the pages, the components, responsive pages, and also the icons, illustrations, and images included in the screens.

What does "lifetime access" exactly mean?

Once you have purchased either the design, code, or both packages, you will have access to all of the future updates based on the roadmap, free of charge.

How does support work?

We're aware of the importance of well qualified support, that is why we decided that support will only be provided by the authors that actually worked on this project.

Feel free to contact us and we'll help you out as soon as we can.

I want to build more than one project with FlowBite. Is that allowed?

You can use FlowBite for an unlimited amount of projects, whether it's a personal website, a SaaS app, or a website for a client. As long as you don't build a product that will directly compete with FlowBite either as a UI kit, theme, or template, it's fine.

Find out more information by reading the license.

What does "free updates" include?

The free updates that will be provided is based on the roadmap that we have laid out for this project. It is also possible that we will provide extra updates outside of the roadmap as well.

What does the free version include?

The free version of FlowBite includes a minimal style guidelines, component variants, and a dashboard page with the mobile version alongside it.

You can use this version for any purposes, because it is open-source under the MIT license.

How do I purchase a license for my entire team?

You can purchase a license that you can share with your entire team here:

  • Figma Files - Buy a team license for $299 USD
  • Figma Files + Tailwind CSS code pre-order - Buy a team license for $699 $559 USD
  • Tailwind CSS code pre-order - Buy a team license for $399 $319 USD

Please use a single account to share with your team to access the download files.

Can I build/sell templates or themes using FlowBite?

It is not allowed to use FlowBite or parts of the project to build themes, templates, UI kits, or page builders.

Find out more information by reading the license.

Can I use FlowBite in open-source projects?

Generally, it is accepted to use FlowBite in open-source projects, as long as it is not a UI library, a theme, a template, a page-builder that would be considered as an alternative to FlowBite itself.

With that being said, feel free to use this design kit for your open-source projects.

Find out more information by reading the license.

Can I use FlowBite for commercial purposes?

Absolutely! You can use this design kit to build any type of commercial business, whether it's a SaaS, an e-commerce app, an application UI.

As long as it is not a design resource that you will re-sell, it is alright to use it for commercial purposes.

Find out more information by reading the license.

Can I get an invoice?

After opening the checkout process, you will be able to add all of your personal or company information that you want to be available on the invoice. After the purchase, you will get an email with the invoice.

If you forgot to complete the information, or you didn't get the invoice by email, feel free to contact us and help you out with the invoice.

When will I get access to the Tailwind CSS code if I pre-ordered it?

The official date that we have set out to release the code version of FlowBite is the 10th of August, 2021. We are already working on the integration and if you have a pre-order, you will also get frequent updates about the progress.

You'll be one of the first to know when it will be available.

What is your refund policy?

If you are unhappy with your purchase, just contact us within 30 days and we'll issue a full refund.

Is it allowed to use the design assets, such as the fonts, icons, and illustrations?

What you see is what you get. Which means that all icons, fonts, and illustrations can be used based on the licensing that we researched or purchased. For example, we purchased rights to use the illustrations in Flowbite.

Where can I access my download files?

After you purchased one of the plans, you will get two emails: one for the invoice, and another one with the download files.

Soon we will create a way that you will be able to access the download files from the FlowBite dashboard from this website.

I have a company registered for VAT. Where can I add the VAT for the invoice?

After initializing the checkout process from Paddle, you will be able to see a text "Add VAT code". Click on that, and add the VAT code for your company. This will also remove the extra VAT tax from the purchase.

Why would I pre-order the Tailwind CSS code?

If you decide to pre-order the Tailwind CSS code, which will arrive on the 10th of August 2021, you can get a base 20% price reduction and purchase it only for $119, instead of $149.

Flowbite - Figma UI kit built for integration with Tailwind CSS | Product Hunt