Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/themesberg/flowbite
Open-source UI component library and front-end development framework based on Tailwind CSS
https://github.com/themesberg/flowbite
components css design-system eslint figma flowbite html hugo javascript prettier tailwind tailwindcss typescript ui-components ui-framework ui-library webpack
Last synced: 1 day ago
JSON representation
Open-source UI component library and front-end development framework based on Tailwind CSS
- Host: GitHub
- URL: https://github.com/themesberg/flowbite
- Owner: themesberg
- License: mit
- Created: 2021-07-28T15:21:50.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-12-18T07:24:42.000Z (27 days ago)
- Last Synced: 2025-01-06T11:19:29.753Z (8 days ago)
- Topics: components, css, design-system, eslint, figma, flowbite, html, hugo, javascript, prettier, tailwind, tailwindcss, typescript, ui-components, ui-framework, ui-library, webpack
- Language: HTML
- Homepage: https://flowbite.com
- Size: 18.6 MB
- Stars: 8,116
- Watchers: 45
- Forks: 765
- Open Issues: 190
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome - themesberg/flowbite - Open-source UI component library and front-end development framework based on Tailwind CSS (HTML)
- jimsghstars - themesberg/flowbite - Open-source UI component library and front-end development framework based on Tailwind CSS (HTML)
- awesome - Flowbite
README
Build websites even faster with components on top of Tailwind CSS
------
## Table of Contents
- [Table of Contents](#table-of-contents)
- [Documentation](#documentation)
- [Getting started](#getting-started)
- [Install using NPM](#install-using-npm)
- [Include via CDN](#include-via-cdn)
- [Bundled JavaScript](#bundled-javascript)
- [Data attributes](#data-attributes)
- [Init functions](#init-functions)
- [ESM and CJS](#esm-and-cjs)
- [TypeScript](#typescript)
- [RTL support](#rtl-support)
- [JavaScript Frameworks](#javascript-frameworks)
- [Back-end Frameworks](#back-end-frameworks)
- [Components](#components)
- [Figma Design System](#figma-design-system)
- [Flowbite Blocks](#flowbite-blocks)
- [Flowbite Icons](#flowbite-icons)
- [Flowbite GPT](#flowbite-gpt)
- [Pro version](#pro-version)
- [Hire us](#hire-us)
- [Learn Design Concepts](#learn-design-concepts)
- [Community](#community)
- [Copyright and license](#copyright-and-license)
## Documentation
For full documentation, visit [flowbite.com](https://flowbite.com/).
## Getting started
Flowbite can be included as a plugin into an existing Tailwind CSS project and it is supposed to help you build websites faster by having a set of web components to work with built with the utility classes from Tailwind CSS.
### Install using NPM
Make sure that you have Node.js and Tailwind CSS installed.
1. Install Flowbite as a dependency using NPM by running the following command:
```bash
npm install flowbite
```
2. Require Flowbite as a plugin inside the `tailwind.config.js` file:
```javascript
module.exports = {
plugins: [
require('flowbite/plugin')
]
}
```
3. Make sure that you add the template path to the `tailwind.config.js` file:
```javascript
module.exports = {
content: [
"./node_modules/flowbite/**/*.js"
]
}
```
4. Include the main JavaScript file to make interactive elements work:
```html
```
### Include via CDN
The quickest way to get started working with Flowbite is to simply include the CSS and JavaScript into your project via a CDN service such as UNPKG or CDNJS (content delivery networks).
Require the following minified stylesheet inside the `head` tag:
```html
```
And include the following javascript file before the end of the `body` tag:
```html
```
### Bundled JavaScript
One of the most popular way of using Flowbite is to include the bundled Javascript file which is UMD ready using a bundler such as Webpack or Parcel which makes sure that all of the data attributes and functionality will work out-of-the-box.
You can directly import the main JavaScript file inside your bundled `app-bundle.js` file like this:
```javascript
import 'flowbite';
```
This file has access to all of the components and it automatically applies event listeners to the data attributes.
### Data attributes
The preferred way to use the interactive UI components from Flowbite is via the data attributes interface which allows us to add functionality via the HTML element attributes and most of the examples on our documentation applies this strategy.
For example, to set up a modal component all you need to do is use `data-modal-target` and `data-modal-{toggle|show|hide}` to toggle, show, or hide the component by clicking on any trigger element.
```html
Toggle modal
```
#### Init functions
You can also use the init functions to set up the event listeners yourself. Here's an example how you can do it with Vue or Nuxt:
```
import { onMounted } from 'vue'
import { initFlowbite } from 'flowbite'
// initialize components based on data attribute selectors
onMounted(() => {
initFlowbite();
})
// Modal HTML markup with data attributes from Flowbite
```
The `initFlowbite` function sets up all of the init functions for dropdowns, modals, navbars, tooltips and so on to hook onto the data attributes. Alternatively, you can also initialise each component category class separately with `initDropdowns` or `initModals`.
You can view more examples by browsing the [components from Flowbite](#components).
### ESM and CJS
Flowbite also offers an API for using the components programmatically and it supports both CJS and ESM for JavaScript which can be helpful if you need to expand the default capabilities of the data attributes interface and get access to function callbacks.
Here's an example how you can import and create a new Modal component inside JavaScript:
```javascript
import { Modal } from 'flowbite'
const $modalElement = document.querySelector('#modalEl');
const modalOptions = {
placement: 'bottom-right',
backdrop: 'dynamic',
backdropClasses: 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40',
onHide: () => {
console.log('modal is hidden');
},
onShow: () => {
console.log('modal is shown');
},
onToggle: () => {
console.log('modal has been toggled');
}
}
const modal = new Modal($modalElement, modalOptions);
modal.show();
```
Check out the JavaScript behaviour section of each component's page to learn how you can use this.
### TypeScript
Flowbite supports type declarations for the interactive UI components including object interfaces and parameter types. Check out the following examples to learn how you can use types with Flowbite.
Additionally to our code above, we will now import some relevant types from the Flowbite package, namely the `ModalOptions` and `ModalInterface`:
```javascript
import { Modal } from 'flowbite'
import type { ModalOptions, ModalInterface } from 'flowbite'
// other code
```
Generally speaking, all of the components have an interface definition that you can use whenever you create a new object to make sure that you're using the correct types of parameters and methods.
When creating a new modal you can set the `ModalInterface` as the main type:
```javascript
const modal: ModalInterface = new Modal($modalElement, modalOptions);
```
Flowbite also supports type definitions for the options object so if you want to set the placement of the modal based on types, here's how you would do that:
```javascript
const modalOptions: ModalOptions = {
placement: 'top-right'
}
const modal: ModalInterface = new Modal($modalElement, modalOptions);
```
Learn more about Flowbite and TypeScript in the [quickstart guide](https://flowbite.com/docs/getting-started/typescript/).
### RTL support
All of the Flowbite UI components have native RTL support and you can easily set it up by using the `dir="rtl"` attribute on the HTML element. Read more about Flowbite and [RTL support here](https://flowbite.com/docs/customize/rtl/).
### JavaScript Frameworks
The awesome open-source community also built and currently maintains the following standalone libraries for React, Vue, Svelte, Angular and Qwik:
- [🌀 Flowbite React Library](https://github.com/themesberg/flowbite-react)
- [🍀 Flowbite Vue Library](https://github.com/themesberg/flowbite-vue)
- [🎸 Flowbite Svelte Library](https://github.com/themesberg/flowbite-svelte)
- [📕 Flowbite Angular Library](https://github.com/themesberg/flowbite-angular)
- [👿 Flowbite Qwik Library](https://github.com/qwikerx/flowbite-qwik)
We also wrote integration guides for the following front-end frameworks and libraries:
- [📝 Flowbite with React guide](https://flowbite.com/docs/getting-started/react/)
- [📝 Flowbite with Next.js guide](https://flowbite.com/docs/getting-started/next-js/)
- [📝 Flowbite with Remix guide](https://flowbite.com/docs/getting-started/remix/)
- [📝 Flowbite with Vue guide](https://flowbite.com/docs/getting-started/vue/)
- [📝 Flowbite with Nuxt guide](https://flowbite.com/docs/getting-started/nuxt-js/)
- [📝 Flowbite with Svelte guide](https://flowbite.com/docs/getting-started/svelte/)
- [📝 Flowbite with Astro guide](https://flowbite.com/docs/getting-started/astro/)
- [📝 Flowbite with MeteorJS guide](https://flowbite.com/docs/getting-started/meteor-js/)
- [📝 Flowbite with Gatsby guide](https://flowbite.com/docs/getting-started/gatsby/)
- [📝 Flowbite with SolidJS guide](https://flowbite.com/docs/getting-started/solid-js/)
- [📝 Flowbite with Qwik guide](https://flowbite.com/docs/getting-started/qwik/)
### Back-end Frameworks
Flowbite has a great integration with most of the back-end frameworks because it relies on vanilla JavaScript:
- [📚 Using Flowbite with Laravel](https://flowbite.com/docs/getting-started/laravel/)
- [🎼 Using Flowbite with Symfony](https://flowbite.com/docs/getting-started/symfony/)
- [🚊 Using Flowbite with Ruby on Rails 7](https://flowbite.com/docs/getting-started/rails/)
- [🐉 Using Flowbite with Phoenix (Elixir)](https://flowbite.com/docs/getting-started/phoenix/)
- [🐸 Using Flowbite with Django](https://flowbite.com/docs/getting-started/django/)
- [🌶 Using Flowbite with Flask](https://flowbite.com/docs/getting-started/flask/)
## Components
Flowbite is an open source collection of UI components built with the utility classes from Tailwind CSS that you can use as a starting point when coding user interfaces and websites.
Alerts
Badge
Breadcrumbs
Buttons
Button group
Cards
Dropdown
Forms
List group
Typography
Modal
Tabs
Navbar
Pagination
Timeline
Progress bar
Tables
Toast
Tooltips
Datepicker
Spinner
Footer
Accordion
Sidebar
Carousel
Avatar
Rating
Input Field
File Input
Search Input
Select
Textarea
Checkbox
Radio
Toggle
Range Slider
Floating Label
Mega Menu
Skeleton
KBD (keyboard)
Drawer (offcanvas)
Popover
Video
Heading
Paragraph
Blockquote
Image
List
Link
Text
Horizontal line (HR)
Speed Dial
Stepper
Indicators
Bottom Navigation
Sticky Banner
Gallery (Masonry)
Jumbotron
Device mockups
Charts
Number Input
Phone Input
Chat Bubble
Copy to Clipboard
Timepicker
DataTables
WYSIWYG Editor
## Figma Design System
If you need the Figma files for the components you can check out our website for more information:
🎨 [Get access to the Figma design files](https://flowbite.com/figma/)
## Flowbite Blocks
Check out Flowbite Blocks to get access to over 400+ website sections coded in Tailwind CSS and Flowbite:
📦 [Check out Flowbite Blocks](https://flowbite.com/blocks/)
## Flowbite Icons
Start using over 450+ free and open-source collection of solid and outline SVG icons built for Tailwind CSS and with support for Figma and JSX (React):
🔍 [Check out the icons](https://flowbite.com/icons/)
## Flowbite GPT
We've developed a custom trained ChatGPT model that you can use to generate website sections and pages based on the resources from Flowbite and Tailwind CSS.
🤖 [Generate with Flowbite GPT](https://chat.openai.com/g/g-y7yC35HB9-flowbite-gpt)
## Pro version
Get access to all premium features including the Figma design system, access to all Flowbite Block sections and a dashboard UI interface:
💎 [Check out Flowbite Pro](https://flowbite.com/pro/)
## Hire us
If you're ready to take your application to the next level you can work with us on your project with developers who have been using Flowbite and Tailwind CSS.
🙋♂️ [Work with us](https://flowbite.com/work-with-us/)
## Learn Design Concepts
If you want to create even better Flowbite pages, learn design fundamentals from Teach Me Design - Enhance UI, a book that covers color theory, typography, UI and UX so you can make the most to implement the Flowbite Ecosystem!
📖 [Learn with Enhance UI](https://www.enhanceui.com/?ref=flowbite-github)
## Community
If you need help or just want to discuss about the library join the community on Github:
⌨️ [Discuss about Flowbite on GitHub](https://github.com/themesberg/flowbite/discussions)
For casual chatting with others using the library:
💬 [Join the Flowbite Discord Server](https://discord.gg/4eeurUVvTy)
Video tutorials and presentations using Flowbite:
🎥 [Subscribe to our YouTube channel](https://www.youtube.com/channel/UC_Ms4V2kYDsh7F_CSsHyQ6A)
## Copyright and license
The Flowbite name and logos are trademarks of Bergside Inc.
- 📝 [Read about the licensing terms](https://flowbite.com/docs/getting-started/license/)
- 📀 [Brand guideline and trademark usage agreement](https://flowbite.com/brand/)