Figma design system built for integration with Tailwind CSS
Design UI interfaces and simplify the process of integrating into live websites with Tailwind CSS using this professional Figma design system featuring 1000+ component variants, responsive pages, dark mode, and auto-layout
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!"
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."
Speechless with how easy this was to integrate
"I recently got my hands on Flowbite Pro, and holy crap, I'm speechless with how easy this was to integrate within my application. Most templates are a pain, code is scattered, and near impossible to theme.
Flowbite has code in one place and I'm not joking when I say it took me a matter of minutes to copy the code, customise it and integrate within a Laravel + Vue application.
If you care for your time, I hands down would go with this."
Complex and beautiful set of elements
"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."
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!"
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."
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.
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:
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 have covered color styles, typography, avatars, shadows, and many more.
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.
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.
Dark mode
All of the components, sections, and pages from the Figma design system and code version also supports dark mode using Figma variants and the utility classes from Tailwind CSS.
Grid layout
Use the grid feature in Figma to preview the container widths for responsive devices and the grid column and row layout when using CSS grid and flexbox with the utility classes from Tailwind CSS and Flowbite.
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.
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
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
- Launch Figma Marketing UI
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
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.
Added more primitives to match Tailwind classes
- Added missing primitives as equivalent for Tailwind CSS classes (eg. border radius, border width, typopgraphy)
- Added autolayout that was missing from some pages
Introduced tokens (variables) and refactored all UI components
- Tokens for colors, spacing, font sizes and more
- Dark mode is available via tokens
- Fixed memory warning alerts by optimizing the design system
- All components are now built on the atomic design principles
- New pages and components for E-commerce
Added 70 E-commerce UI Blocks:
- Product Lists
- Category Lists
- Storefront hero sections
- Featured cards
- General Overview
- Services form
- Warranties
- Promotional
- Reviews
- Customer service
- Refund forms
- Refund overview
- Refund status
Added 6 E-commerce UI pages:
- Refund forms
- Refunds overview
Other updates and fixes:
- Fixed icons with red background
- Fix spacing and padding for several e-commerce blocks
- Updated autolayout for some components
Added 8 new E-commerce UI pages:
- Homepage
- Product Showcase
- My Cart
- Checkout
- Order Summary
- My Orders
- Payment Page
- Order Tracking
Added 40 E-commerce UI blocks:
- Homepage
- Shopping Cart
- Checkout
- Payment
- Track Order
- Product Showcase
- Product Review
- Product Review
- Product Testimonials
- Product Description
- Product FAQ
- Orders List
- Order Summary
- My Orders
- Highlighted Products
- Footers
Added over 50 E-commerce UI components:
- Navbar
- Mega Menu
- Dropdowns
- Product Cards
- Category Cards
- Fitlers
- Sidenavs
- Drawers
Other updates and fixes:
- Fixed invalid components error when you try to publish Flowbite Design System as your main library
- Fixed some icons that had a red background behind instead of transparent
- Fixed padding for some Marketing UI sections
- Updated the components that did not use the latest version of auto-layout
Added over 40 new Application UI pages:
- Sales Overview
- Marketing Data
- E-commerce
- Crypto/Portfolio
- Project Management
- Customer Services
- Logistics
- Music/Streaming
- Banks Data
- Car Services Data
- Invoice
- Billing
- User settings
- Kanban
- Calendar
- Transactions
- Products
- Project management
- To-do list
- Support tickets
- Notifications page
- Users CRUD
- Events CRUD
- Integrations
- API management
- Chat interface
- AI Chat interface
- Two factor authentication
- Error pages (404, 500)
- Authentication pages
Added new widget components:
- Input widgets
- Read widgets
Other updates and fixes:
- Fixed padding for widgets cards
- Fixed missing icons for Marketing UI sections
- Removed unused frames from Application UI components to help files load faster and reduce memory usage
Released custom Flowbite Icons Library:
- 240 solid icon styles
- 240 outline icon styles
Added local variables for:
- Spacing
- Colors
- Border Radius
- Container Size
- Width
Added new widget components:
- File Upload
- Lists
- Inputs
Other updates and fixes:
- Fixed padding for some components that did not have padding-top and padding bottom
- Fixed missing component errors from some table components which took place due to the fact that some variants for badges, forms and buttons were changed
- Resized all images and compress them to help files load faster and reduce memory usage
- Removed unused frames from components and sections from tables
Added new components:
- Jumbotron
- Banners
- Gallery (Masonry)
- Mockups
Other updates:
- Resized all the images and compressed them to improve file load and reduce memory usage
- Removed unused frames from components and sections
Added new Marketing UI pages:
- Landing pages, about, login and register, services, contact, testimonials, terms and conditions, error pages, project showcase, pricing pages, and more.
Added new block sections:
- Hero sections (4 examples)
- Customer sections (1 example)
- Content sections (2 examples)
- Feature sections (1 example)
- CTA sections (2 examples)
- Team sections (3 examples)
- Case study sections (6 examples)
- Event schedule sections (4 examples)
Added new block sections:
- Hero sections (4 examples)
- Customer sections (1 example)
- Content sections (2 examples)
- Feature sections (1 example)
- CTA sections (2 examples)
- Team sections (3 examples)
- Case study sections (6 examples)
- Event schedule sections (4 examples)
New widget components for Application UI:
- Statistics
- Charts/Graphs
- Location maps
Other updates and bugfixes:
- Fixed navbar spacing inconsistencies
- Fixed double icon for some primary buttons
- Re-linked several components that were de-linked from the parent component
- Fixed typography issues for Marketing UI blocks
- Fixed mobile spacing for Marketing UI blocks
- Fixed missing component errors which took place due to the fact that some variants for badges, forms and buttons were changed
- Fixed missing libraries error when you try to publish Flowbite Figma as a library
- Flowbite Pro Figma v.2.5.0 no longer uses components from previous versions, we removed all the components from older versions that were used in the file
- Reorganized the Figma file for blocks and pages to improve performance
- Refactored forms, nav tabs, advanced tables, CRUD layouts and charts
- Removed unused frames from components and sections
- Improved dark version for blocks and and some Application UI components
Added new UI components and variants:
- Stepper, Indicator
Other updates:
- Fixed button and form inconsistencies for Publisher UI pages
- Fixed toggles “Missing variant” for Advanced Tables & CRUD Layouts
- Fixed missing variants for some primary buttons
Added new Figma properties feature for:
- Buttons, Forms, Alerts
Other updates:
- Improved dark version for badges and alerts
- Refactored forms, buttons and all Application UI components
- Removed unused frames from components and sections
- Fixed button and form inconsistencies
- Relinked several components that were delinked from the parent component
Added new components:
- CRUD Layouts, Faceted Search, Dropdown Filters, Advanced Tables, Table headers and footers, Timeline, Toast, Small form elements
Fixes and refactorings:
- Fixed buttons for Marketing UI (added base size instead of large)
- Refactored progress bars, they are now created with autolayout
- Fixed typography issues for Marketing UI
- Fixed “missing component” errors
Added new components:
- Drawer, KBD, Tables, Popovers, Skeleton, Typography Format, Navbars, Badges, Crypto Modal
Added new Marketing UI sections:
- Register, Login, Forgot password, Reset password, User Onboarding
Added new Marketing UI pages:
- Community Blog, Community Single Article, Simple Article with Sidebar, Background Image Article, Live Blogging, Default Article, Header Article
Added new App UI components:
- Vertical Bar Chart, Horizontal Bar Chart, Line Chart, Area Chart, Heatmap, Treemap, Candlestick, World Map, Donut Chart, Radial Bar
- Added Dashboard Layouts
- Fix some inconsistencies regarding spacing, padding, and text size for Forms, and Buttons
Fix inconsistencies for buttons and forms.
- Added large variants for Datepickers and Autocomplete Inputs
- Fix some inconsistencies regarding spacing, padding and text size for Forms, Datepicker and Buttons
- Added primary color as a main color for all components and blocks
- Improve Figma mechanism behaviour for variants and Auto Layout v3.0
- Added new Floating Labels Forms
Added new Marketing UI sections and pages.
Added support for Tailwind CSS v3.x utility classes and reorganized the Figma file.
Added new components:
- popovers
- tables
- toasts
- social icons
- social buttons
- circular buttons
- badges with remove buttons
Added new variants:
- typography
- shadows
- logo
Added new components:
- alerts
- accordions
- breadcrumbs
- modals
- button groups
- animated spinners
- modals
- nav tabs
- list group
- tables
- autocomplete search inputs
- range sliders
- pagination
- carousel slider
Other changes:
- fixed font weight for buttons
- fixed autolayout for buttons
- added dark mode for all the next components
Main changes:
- added variants for datepicker menus
- added dark mode for datepicker
- added variants for dropdown menu
- added dark mode for dropdown menu
- added variants for button group
- added dark mode for button group
- added dark mode for pricing and faq sections
Main changes:
- added Figma grid support
Dark version changes:
- added dark version variant for components
- added dark version variant for all sections and pages
- added dark version for mobile and tablet pages
Other changes:
- updated widgets in dashboard to include a dropdown period picker and a CTA button
- add new Figma constraints feature
- improve Figma mechanism behaviour for variants and auto layout
- update the acquisition overview widget
- update the navigation bar with an extra applications action
Main changes:
- new datepicker component and variants
- extra colors variants for the buttons
- new sections, such as: pricing, pricing comparison table, FAQ, footers
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
Main changes:
- initial design file and features
Choose the right plan for your business
Used by freelancers, startups, companies and enterprise-level corporations all over the world
Community edition
FreeGet started with an open source library of web components and interactive elements based on Tailwind CSS.
Get startedDeveloper edition
Recommended for professional developers and companies building enterprise-level websites and applications.
View team pricingDesigner edition
Upgrade your Figma toolkit with a design system built on top Tailwind CSS featuring variants, style guide, auto layout, and more.
Learn more
Community edition
FreeGet started with an open source library of web components and interactive elements based on Tailwind CSS.
Get startedDeveloper edition
Recommended for professional developers and companies building enterprise-level websites and applications.
View team pricingDesigner edition
Upgrade your Figma toolkit with a design system built on top Tailwind CSS featuring variants, style guide, auto layout, and more.
Learn moreFrequently 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 are 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 have purchased Flowbite Pro. You will then have access to a private support channel.
I want to build more than one project with Flowbite Pro. Is that allowed?
You can use Flowbite for an unlimited amount of projects, whether it is 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 is fine.
Find out more information byreading 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.
Is there React/Vue/Svelte version supported?
Currently the most supported framework is React and Next.js next to the Figma and HTML + JavaScript version of Flowbite Pro. We already offer a dashboard in React and Next.js and over 300 blocks and components in React.
Eventually all of the pro components, sections, and pages will be integrated into React, Vue, and Svelte. This will take some time and you should expect the React version to be released the soonest.
These launches also depend on how fast we can build the libraries such as Flowbite React, Flowbite Vue, Flowbite Svelte, and Flowbite Angular.
Does Flowbite work with Tailwind v4?
Yes, Flowbite has been upgraded to be fully compatible with Tailwind v4 meaning that you can use the new in-CSS configuration, native CSS variables and many more features.
How do I purchase a license for my entire team?
You can purchase a license that you can share with your entire team here:
Please use a single account to share with your team to access the download files.
How many team members are allowed to use Flowbite Pro with a team license?
If you purchase a team license you can distribute the license account to as many as 10 team members.
If you need access to more than 10 team members, you can contact us for a special agreement and we will help you out with a custom quote.
I need a quote for my company. How can I get that?
If you need a quote for your company, you can contact us and we will provide you with a quote based on the number of team members that will be using Flowbite Pro.
Can I build/sell templates or themes using Flowbite Pro?
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 byreading the license.
Can I use Flowbite Pro 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 byreading the license.
Can I use Flowbite Pro for commercial purposes?
Absolutely! You can use this design kit to build any type of commercial business, whether it is 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 byreading the license.
Are you available for hire?
We do have a team specialized with the Flowbite ecosystem that includes the Figma design system, the UI library and the block sections and templates. If you need help with your project, feel free to hire us.
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 Pro?
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 we expect the launch of E-commerce UI?
We have launched the first batch of E-commerce UI in Figma which includes over 50 new UI components, 40 block sections and 8 pages.
The coded version will be launched in a phased way in the following months and we will release new pages, components, and sections in the future.
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.
Do you offer discounts for students or non-profit organizations?
We do have a special discount for students and non-profit organizations. Otherwise, we never offer discounts not even for Black Friday because want to protect the purchase value for all of our customers.
To apply for the student or non-profit discount, please send an email from your student or non-profit organization email address using our contact form.