# themesberg/flowbite

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/themesberg-flowbite).**

9,283 stars · 867 forks · HTML · MIT

## Links

- GitHub: https://github.com/themesberg/flowbite
- Homepage: https://flowbite.com
- awesome-repositories: https://awesome-repositories.com/repository/themesberg-flowbite.md

## Topics

`components` `css` `design-system` `eslint` `figma` `flowbite` `html` `hugo` `javascript` `prettier` `tailwind` `tailwindcss` `typescript` `ui-components` `ui-framework` `ui-library` `webpack`

## Description

Flowbite is a cross-framework UI library and design system built as a collection of pre-styled components and layout blocks using Tailwind CSS utility classes. It functions as a TypeScript UI toolkit and a general web framework for creating responsive websites and applications.

The project provides a mirroring Figma design system to allow prototyping of components and variants before they are coded. It distinguishes itself through an AI-driven approach to page generation and the creation of design specifications via a command-line interface.

The library covers a wide range of interactive interface elements, including navigation bars, modals, and date pickers, as well as pre-designed blocks for administrative dashboards. It includes a framework-agnostic core that supports integration with React, Vue, Svelte, Astro, and various backend engines like Laravel and Django.

Installation is supported via standard package managers and CDN script integration.

## Tags

### User Interface & Experience

- [Cross-Framework UI Libraries](https://awesome-repositories.com/f/user-interface-experience/cross-framework-ui-libraries.md) — Provides a comprehensive set of UI components compatible with React, Vue, Svelte, and other web frameworks.
- [Tailwind Component Collections](https://awesome-repositories.com/f/user-interface-experience/css-component-libraries/tailwind-component-collections.md) — Provides a comprehensive collection of pre-styled UI elements built using Tailwind CSS utility classes.
- [Utility-First CSS](https://awesome-repositories.com/f/user-interface-experience/utility-first-css.md) — Builds a comprehensive UI library using a utility-first CSS approach based on Tailwind CSS.
- [Svelte UI Libraries](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/ecosystem-specific-libraries/svelte-ui-libraries.md) — Provides a standalone Svelte library to use its components alongside Tailwind CSS. ([source](https://flowbite.com/docs/getting-started/quickstart/))
- [React Components](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components.md) — Provides installation and configuration for using the component library within React and Next.js projects. ([source](https://flowbite.com/docs/getting-started/quickstart/))
- [Figma Component Kits](https://awesome-repositories.com/f/user-interface-experience/design-component-managers/figma-component-kits.md) — Ships a Figma design system that mirrors code components to ensure consistency between design and development.
- [Component Interaction Management](https://awesome-repositories.com/f/user-interface-experience/interactive-ui-components/component-interaction-management.md) — Provides the ability to attach behavioral logic to HTML elements using both data attributes and programmatic APIs. ([source](https://cdn.jsdelivr.net/gh/themesberg/flowbite@main/README.md))
- [Modal Dialogs](https://awesome-repositories.com/f/user-interface-experience/modal-dialogs.md) — Provides interactive overlay dialogs and notifications to capture user input without navigating away from the page. ([source](https://flowbite.com/docs/getting-started/svelte/))
- [Navigation Bars](https://awesome-repositories.com/f/user-interface-experience/navigation-components/navigation-bars.md) — Ships responsive top-level navigation bars featuring branding, links, and sticky positioning. ([source](https://flowbite.com/docs/getting-started/svelte/))
- [Pre-designed UI Elements](https://awesome-repositories.com/f/user-interface-experience/pre-designed-ui-elements.md) — Provides complete, pre-designed layout sections and component patterns for rapid marketing and application development. ([source](https://flowbite.com/docs/getting-started/svelte/))
- [JavaScript Component Controllers](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/javascript-component-controllers.md) — Ships a JavaScript API with callbacks and lifecycle events to manage interactive components programmatically. ([source](https://flowbite.com/docs/getting-started/introduction/))
- [TypeScript Interaction Typing](https://awesome-repositories.com/f/user-interface-experience/typescript-interaction-typing.md) — Flowbite provides TypeScript interfaces and type declarations for component objects and methods to ensure compile-time safety. ([source](https://flowbite.com/docs/getting-started/nuxt-js/))
- [TypeScript Interface Mapping](https://awesome-repositories.com/f/user-interface-experience/typescript-interface-mapping.md) — Maps component configuration options and API methods to strict type definitions for compile-time validation.
- [TypeScript UI Frameworks](https://awesome-repositories.com/f/user-interface-experience/typescript-ui-frameworks.md) — Provides type-safe interactive components and interfaces built with TypeScript for frontend development.
- [Admin Dashboard Frameworks](https://awesome-repositories.com/f/user-interface-experience/admin-dashboard-frameworks.md) — Provides pre-defined UI blocks and structured component patterns for building administrative interfaces and CRUD layouts.
- [Badge Components](https://awesome-repositories.com/f/user-interface-experience/badge-components.md) — Offers small styled labels, counts, and status indicators as standalone or integrated badge components. ([source](https://flowbite.com/docs/components/badge/))
- [Card Components](https://awesome-repositories.com/f/user-interface-experience/card-components.md) — Provides contained UI elements for displaying grouped content such as images, text, and buttons. ([source](https://flowbite.com/docs/components/card/))
- [Theme Application & Switching](https://awesome-repositories.com/f/user-interface-experience/color-themes/theme-application-switching.md) — Supports switching between multiple ready-made design themes by importing different CSS theme files. ([source](https://cdn.jsdelivr.net/gh/themesberg/flowbite@main/README.md))
- [Component Initializers](https://awesome-repositories.com/f/user-interface-experience/component-initializers.md) — Provides utilities to mount and attach functional component logic to existing DOM elements via single function calls. ([source](https://cdn.jsdelivr.net/gh/themesberg/flowbite@main/README.md))
- [Admin Dashboard Templates](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/ecosystem-specific-libraries/vue-ui-libraries/admin-dashboard-templates.md) — Ships pre-defined CRUD layouts and API integration patterns for building professional administrative interfaces. ([source](https://flowbite.com/docs/getting-started/astro/))
- [Custom Component Extensions](https://awesome-repositories.com/f/user-interface-experience/custom-component-extensions.md) — Supports the export of standalone component modules and type declarations for custom event handling and state management. ([source](https://flowbite.com/docs/getting-started/astro/))
- [Date Pickers](https://awesome-repositories.com/f/user-interface-experience/date-pickers.md) — Provides calendar-based date selection inputs for integration into web pages. ([source](https://flowbite.com/docs/getting-started/phoenix/))
- [Design & Prototyping Tools](https://awesome-repositories.com/f/user-interface-experience/design-prototyping-tools.md) — Provides a mirroring Figma design system with variants and auto-layout to prototype components before coding. ([source](https://flowbite.com/docs/getting-started/introduction/))
- [Component Reinitialization](https://awesome-repositories.com/f/user-interface-experience/dynamic-content-updaters/dynamic-rendering-updaters/component-reinitialization.md) — Scans the DOM to recreate interactive component instances following dynamic content updates or re-renders. ([source](https://flowbite.com/docs/getting-started/javascript/))
- [Data-Attribute-Driven Interactivity](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/ui-interactivity/data-attribute-driven-interactivity.md) — Enables interactive functionality on HTML elements via inline data attributes to minimize custom JavaScript. ([source](https://flowbite.com/docs/getting-started/javascript/))
- [Pre-styled Form Themes](https://awesome-repositories.com/f/user-interface-experience/form-field-extensions/accessible-combobox-form-integrations/form-field-state-integrations/pre-styled-form-themes.md) — Provides pre-styled form themes and specific form types optimized for server-side rendering. ([source](https://flowbite.com/docs/getting-started/symfony/))
- [Right-To-Left Support](https://awesome-repositories.com/f/user-interface-experience/frontend-ui-toolkits/right-to-left-support.md) — Adapts user interfaces for right-to-left languages using logical CSS properties and native direction attributes. ([source](https://flowbite.com/docs/customize/rtl/))
- [Generic Button Components](https://awesome-repositories.com/f/user-interface-experience/generic-button-components.md) — Ships interactive button components with a wide variety of styles, sizes, colors, and gradients. ([source](https://flowbite.com/docs/components/buttons/))
- [Breadcrumb Navigations](https://awesome-repositories.com/f/user-interface-experience/links/categorization/navigation-hierarchies/breadcrumb-navigations.md) — Provides customizable breadcrumb navigation trails with integrated dropdowns to display site hierarchy. ([source](https://flowbite.com/docs/components/breadcrumb/))
- [Persistent UI Components](https://awesome-repositories.com/f/user-interface-experience/persistent-ui-components.md) — Ensures interactive components like dropdowns and modals remain functional after dynamic page loads by hooking into framework events. ([source](https://flowbite.com/docs/getting-started/rails/))
- [RTL Layouts](https://awesome-repositories.com/f/user-interface-experience/rtl-layouts.md) — Automatically switches the direction of spacing, positioning, and alignment when the RTL attribute is active. ([source](https://flowbite.com/docs/customize/rtl/))
- [Global Theme Instances](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/css-utility-libraries/css-utilities/global-css-stylings/global-theme-instances.md) — Enables the definition of a global theme object with custom classes to override default element styles application-wide. ([source](https://flowbite.com/docs/getting-started/remix/))
- [Alert Components](https://awesome-repositories.com/f/user-interface-experience/ui-components/feedback-overlay-components/alert-components.md) — Provides pre-styled alert components for displaying contextual feedback messages with icons and color-coding. ([source](https://flowbite.com/docs/components/alerts/))
- [Theme Customization](https://awesome-repositories.com/f/user-interface-experience/visual-theme-configurations/visual-themes/theme-customization.md) — Allows modifying the visual appearance of elements through direct class attributes or centralized theme objects. ([source](https://flowbite.com/docs/getting-started/next-js/))

### Development Tools & Productivity

- [Component Instance Registries](https://awesome-repositories.com/f/development-tools-productivity/instance-initialization/component-instance-initializers/component-instance-registries.md) — Maintains a global registry of initialized UI objects to allow programmatic control via element IDs.
- [Design Specification Management](https://awesome-repositories.com/f/development-tools-productivity/design-specification-management.md) — Flowbite enables modification of specific fields within existing design skill files to refine visual specifications via the CLI. ([source](https://flowbite.com/docs/getting-started/typeui/))
- [Project Configuration Utilities](https://awesome-repositories.com/f/development-tools-productivity/project-configuration-utilities.md) — Provides a CLI command to configure utility styles and install components into existing React applications. ([source](https://flowbite.com/docs/getting-started/react/))

### Software Engineering & Architecture

- [Component Lifecycle Reinitialization](https://awesome-repositories.com/f/software-engineering-architecture/event-driven-hook-systems/component-lifecycle-reinitialization.md) — Ensures interactive components are correctly re-instantiated after dynamic page loads or framework-driven DOM updates.
- [TypeScript Type Definitions](https://awesome-repositories.com/f/software-engineering-architecture/typescript-type-definitions.md) — Provides object interfaces and parameter types for UI components to ensure correct configuration. ([source](https://cdn.jsdelivr.net/gh/themesberg/flowbite@main/README.md))

### Web Development

- [Attribute-Based Directives](https://awesome-repositories.com/f/web-development/attribute-based-directives.md) — Implements mechanisms for binding interactive behavior and state to HTML elements via custom data attributes.
- [Frontend Framework Integrations](https://awesome-repositories.com/f/web-development/frontend-framework-integrations.md) — Sets up a consistent design system across modern frameworks including React, Vue, Svelte, and various backend engines.
- [Interactive Web Component Libraries](https://awesome-repositories.com/f/web-development/interactive-web-component-libraries.md) — Provides functional interface elements like modals, dropdowns, and navbars supporting both data attributes and programmatic control.
- [UI Component Frameworks](https://awesome-repositories.com/f/web-development/ui-component-frameworks.md) — Functions as a UI component framework providing pre-built elements for consistent web layouts and interactions.
- [Vanilla JavaScript Implementations](https://awesome-repositories.com/f/web-development/vanilla-javascript-implementations.md) — Implements core interactive logic in standard JavaScript to ensure compatibility across various frontend and backend frameworks.
- [Vue.js Frameworks](https://awesome-repositories.com/f/web-development/vue-js-frameworks.md) — Provides configuration for using the component library within Vue 3 and Nuxt projects. ([source](https://flowbite.com/docs/getting-started/quickstart/))
- [Project Scaffolders](https://awesome-repositories.com/f/web-development/create-react-app-customizations/project-scaffolders.md) — Offers a CLI command to scaffold new React applications with pre-configured utility styles and UI components. ([source](https://flowbite.com/docs/getting-started/react/))
- [Configuration Attributes](https://awesome-repositories.com/f/web-development/element-attributes/configuration-attributes.md) — Automatically activates interactive behaviors by scanning HTML data attributes during the component lifecycle. ([source](https://flowbite.com/docs/getting-started/vue/))
- [RTL Layouts](https://awesome-repositories.com/f/web-development/internationalization-localization/rtl-layouts.md) — Employs CSS logical properties and direction attributes to automatically mirror layouts for right-to-left languages.

### Artificial Intelligence & ML

- [AI Design Generation](https://awesome-repositories.com/f/artificial-intelligence-ml/ai-design-generation.md) — Uses AI-driven prompts via the CLI to automatically generate custom design system specifications for branding and typography. ([source](https://flowbite.com/docs/getting-started/typeui/))
- [AI Web Page Generators](https://awesome-repositories.com/f/artificial-intelligence-ml/ai-web-page-generators.md) — Provides AI-driven tools to synthesize functional website sections and pages from natural language prompts. ([source](https://flowbite.com/docs/getting-started/introduction/))

### Graphics & Multimedia

- [SVG Icon Libraries](https://awesome-repositories.com/f/graphics-multimedia/svg-icon-libraries.md) — Provides a comprehensive collection of solid and outline styled SVG icons for web projects. ([source](https://flowbite.com/docs/getting-started/introduction/))