New Application UI

Premium pages and components built with Tailwind CSS

Get started with an enterprise-level, profesionally designed, fully responsive, and HTML semantic set of web pages, sections and over 400+ components crafted with the utility classes from Tailwind CSS and based on the Flowbite component library

DESIGNED AND DEVELOPED BY THEMESBERG™
FEATURED IN

Application UI pages and components

Get access to over 20+ pages and 400+ components that you can use in a web application including a dashboard layout, charts, calendar, kanban board, and more

Figma logo+Tailwind CSS logo

Figma design kit built for integration with Tailwind CSS

The Figma file is built using the utility classes from Tailwind CSS meaning that you won't have to write any extra classes.

Figma app
Hugo
Hugo logo

The world's fastest framework for building websites

Get started with HUGO templates and YAML data sources to build lightning fast statically generated websites.

Webpack logo

All your JavaScript, styles, and assets bundled with Webpack

Power up your Tailwind CSS development workflow with a Webpack configuration using Post CSS, code minification, and even class encryption.

Webpack engine

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
  • Use Figma constraints and adaptive layout
  • Integrate the dark version in Tailwind CSS
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.

Testimonials

Explore the whole collection of open-source web components and interactive elements built with the utility classes from Tailwind CSS

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 Fedorenko
Eugene 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 Nagi
Amrit 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 Paduraru
Elisa 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."

Elisa Paduraru
Alexandru PăduraruManaging Partner at Creative Tim

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 Ros Salvador
Arnau Ros SalvadorFreelance Designer

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 Kissi
Csaba KissiCTO at Elerion ltd.

Choose the right plan for your business

Used by freelancers, startups, companies and enterprise-level corporations all over the world

Community edition

Free

Get started with an open source library of web components and interactive elements based on Tailwind CSS.

Get started

Developer edition

$249

Recommended for professional developers and companies building enterprise-level websites and applications.

View team pricing

Designer edition

$129

Upgrade your Figma toolkit with a design kit built on top Tailwind CSS featuring variants, style guide, auto layout, constraints, and more.

Learn more
Tailwind logoTailwind CSS code
Community Edition
Developer Edition
Designer Edition
Basic components (view all)
Application UI (view demo)
Marketing UI pre-order
E-commerce UI pre-order
Figma logoFigma design files
Community Edition
Developer Edition
Designer Edition
Free edition (duplicate in Figma)
Application UI (preview in Figma)
Marketing UI pre-order
E-commerce UI pre-order
HUGO logoHUGO templates
Community Edition
Developer Edition
Designer Edition
HUGO templates
JSON data sources
Webpack logoWebpack
Community Edition
Developer Edition
Designer Edition
Post CSS configuration
JS, HTML & CSS source file bundling
CSS purging & minification
JavaScript minification
Support
Community Edition
Developer Edition
Designer Edition
Community
Bug reports & feature requests
Support duration
1 year
1 year
Updates and integrations
Community Edition
Developer Edition
Designer Edition
Support duration
All updates from roadmap included
Figma updates from roadmap
React version
25% discount when launched
15% discount when launched
Vue version
25% discount when launched
15% discount when launched
Laravel version
20% discount when launched
10% discount when launched
React Native version
10% discount when launched
5% discount when launched

Community edition

Free

Get started with an open source library of web components and interactive elements based on Tailwind CSS.

Get started

Developer edition

$249

Recommended for professional developers and companies building enterprise-level websites and applications.

View team pricing

Designer edition

$129

Upgrade your Figma toolkit with a design kit built on top Tailwind CSS featuring variants, style guide, auto layout, constraints, and more.

Learn more

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.

You can contact us on this page via email or discuss via the chatroom on the bottom right side of this page.

Feel free to join our Discord channel and let one of the project maintainers know that you've purchased Flowbite Pro. You'll then have access to a private support channel.

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.

What is the difference between FlowBite and Tailwind UI?

Although both FlowBite and Tailwind UI are built for integration with Tailwind CSS, the main difference is in the design, the pages, the extra components and UI elements that FlowBite includes.

Additionally, FlowBite is a project that is still in development, and later it will include both the application, marketing, and e-commerce UI interfaces.

How do I purchase a license for my entire team?

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

  • Developer edition - Buy a team license for $799 USD
  • Designer edition - Buy a team license for $299 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.

What is the difference between Tailwind UI and Flowbite?

The main difference is that you get everything you see in the demo already put together, in comparison with Tailwind UI where you have to manually put together the section based code blocks.

Additionally, Flowbite also offers a set of advanced libraries such as charts, calendar, kanban board which Tailwind UI does not currently support.

Lastly, as Tailwind UI announced that it will no longer support Figma for future release, with Flowbite you can rest assured that we will keep updating the Figma files as we develop new pages and sections.

When can I get the design files for the marketing UI and e-commerce pages?

The application UI's Tailwind code version has been released on the 25th of September and you will instantly get it if you purchase the code version.

We will start working on the marketing UI design in October 2021 and we expect to finish the design and code version until the end of 2021.

The e-commerce part will start to be designed in the first quarter of 2022 and we expect both the design and code to be done by the end of the first quarter of 2022.

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.