flowbite
Open-source UI component library and front-end development framework based on Tailwind CSS
A library of ready-made UI components like buttons, modals, and navigation bars built on Tailwind CSS, where interactive behavior is activated by adding data attributes to HTML, no custom JavaScript required.
Flowbite is a library of ready-made website components built on top of Tailwind CSS, a popular system for styling web pages using short descriptive class names added directly to HTML elements. The library gives you pre-built pieces like buttons, modals, dropdowns, navigation bars, cards, and many others, so you do not have to construct those common interface elements from scratch every time you build a site.
You add Flowbite to a project either by installing it as an npm package, which integrates it into your build process, or by linking to it through a CDN, which is a publicly hosted copy of the files you can reference from any webpage without installing anything. Once included, interactive components like modals and dropdowns are activated by adding specific attributes directly to your HTML elements rather than writing JavaScript yourself. For example, you point a button to a modal using a data attribute and the library handles the show and hide behavior automatically.
Flowbite supports modern JavaScript workflows. It can be imported as a module in a bundled project, and it includes TypeScript definitions for people working in typed environments. It also supports right-to-left text layouts for languages that read in that direction. The library works alongside popular JavaScript frameworks including React, Vue, Angular, and Svelte, with separate packages maintained for each.
Beyond the core component library, the project offers a collection of larger page section templates called Flowbite Blocks, an icon set called Flowbite Icons, and a Figma design file that matches the components for designers working in that tool. A paid pro version exists with additional components and templates, though the core library is free and MIT licensed.
The project has full documentation at flowbite.com, covering every component with code examples. The full README is longer than what was shown.
Where it fits
- Add a working modal, dropdown, or navbar to a webpage by copying a snippet and adding data attributes, no JavaScript to write
- Build a complete landing page using Flowbite Blocks section templates without writing CSS from scratch
- Drop Flowbite into a React or Vue project by installing the framework-specific npm package
- Use the Flowbite Figma design file to design a UI and then implement it exactly with matching components