gitmyhub

flowbite

HTML ★ 9.3k updated 1mo ago

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.

HTMLTailwind CSSJavaScriptTypeScriptnpmsetup: easycomplexity 2/5

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