DOCSEARCHbyAlgolia
Submit Docs

Flowbite

repository·main·Indexed 11 days ago

https://github.com/themesberg/flowbite

An open-source library of interactive UI components built on top of Tailwind CSS. Version 4.0.2 provides ready-to-use components for navigation, forms, feedback, and data display, supporting ESM, CJS, TypeScript, and RTL layouts. It offers a programmatic JavaScript API, data-attribute-driven interactivity, and integration with Tailwind CSS v4.

Tokens
276.5K
Snippets
650
Records
713
Agent score
92%

What's inside Flowbite

  2. Get started with Flowbite

    main
    Flowbite is a library of components built on top of Tailwind CSS designed to help build websites faster. You can integrate Flowbite into your project using NPM, via CDN, or by using bundled JavaScript. It supports ESM, CJS, TypeScript, RTL (Right-to-Left) layouts, and integrates with various JavaScript and back-end frameworks.

  3. Access Flowbite design assets and extensions

    main

    Flowbite provides several ecosystem extensions for designers and developers:

    • Figma Design System: Access Figma files for components via the Flowbite Figma page.
    • Flowbite Blocks: Access 400+ pre-coded website sections built with Tailwind CSS and Flowbite at flowbite.com/blocks.
    • Flowbite Icons: Use 450+ free SVG icons (solid and outline) designed for Tailwind CSS, with support for Figma and JSX (React) at flowbite.com/icons.
    • Flowbite GPT: Use a custom-trained ChatGPT model to generate website sections and pages based on Flowbite and Tailwind CSS resources via Flowbite GPT.

  4. Explore Flowbite UI Components

    main

    Flowbite is an open-source collection of UI components built using Tailwind CSS utility classes. It provides a wide range of ready-to-use components for building user interfaces, including navigation, forms, layout elements, and interactive widgets.

    Key component categories include:

    • Navigation & Layout: Navbar, Breadcrumbs, Sidebar, Footer, Pagination, Bottom Navigation, Tabs, Accordion.
    • Forms & Inputs: Input Fields, Select, Textarea, Checkbox, Radio, Toggle, Datepicker, Timepicker, Number Input, Phone Input, Floating Label, Search Input.
    • Feedback & Overlays: Alerts, Badges, Modals, Toasts, Tooltips, Popovers, Spinners, Progress Bars, Skeleton.
    • Data Display: Tables, Cards, Lists, Avatars, Timelines, Charts, DataTables, Gallery (Masonry).
    • Interactive Widgets: Carousel, Dropdowns, Drawer (offcanvas), Speed Dial, Stepper, Chat Bubbles, QR Code, WYSIWYG Editor.

  5. Blazor Starter Projects and Libraries

    main

    For developers looking for a pre-configured environment, there are two main resources:

    • Tailwind Blazor Starter: An open-source project containing a baseline setup of Blazor, .NET, Tailwind CSS, and Flowbite. GitHub Repository.
    • Flowbite Blazor: An official UI library for Blazor and .NET currently being developed by the community to provide native Blazor components. GitHub Repository.

  6. RTL support in Flowbite UI components

    main
    All Flowbite UI components support RTL by default. When the dir="rtl" attribute is present on the <html> element, all components and documentation examples will render correctly in mirrored mode. This is achieved through the use of logical properties and Tailwind CSS RTL variants within the component source code.

  7. Configure chart legends

    main

    To display legend indicators in your charts, set legend: { show: true } within your ApexCharts options object. You can control the legend's position using the position: {x} option inside the legend object to place it at the top or bottom of the chart.

    const options = {
  legend: {
    show: true,
    position: { x: 'top' }
  }
};

  8. Identify the default color palette

    main
    Flowbite uses a default color palette based on Tailwind CSS color scales. When customizing or referencing colors in your configuration or code, you can access these color groups using specific keys. For example, the Gray palette is accessed via colors.gray (or colors.coolGray depending on the specific implementation context), Red via colors.red, and Yellow/Amber via colors.amber. Each color group contains a scale from 50 to 900 (e.g., bg-red-50, text-red-600).

  9. Customize component styles for dark mode

    main

    Flowbite components include built-in dark mode support using the dark:{*} variant. To customize how a component looks in dark mode, apply specific dark mode utility classes. When the dark class is present on the html element, the dark: variants will override the default styles.

    <div class="bg-white dark:bg-gray-800">
  <h1 class="text-gray-900 dark:text-white">Dark mode</h1>
  <p class="text-gray-600 dark:text-gray-300">
    Lorem ipsum...
  </p>
</div>

  10. How the Accordion component works

    main

    The Accordion component is a collection of vertically collapsing header and body elements used to show or hide information. It relies on Tailwind CSS utility classes for styling and Flowbite's JavaScript for interactivity via data attributes.

    Core Configuration

    To control the behavior of the accordion, use the data-accordion attribute on the container element:

    • data-accordion="collapse": Only one child element can be active (expanded) at a time. Expanding one will automatically collapse any other open element.
    • data-accordion="open": Multiple elements can be kept open simultaneously.

    Required Attributes for Interactivity

    For each accordion item, you must link the header to its corresponding body:

    1. data-accordion-target="{selector}": Set this on the header element (usually a <button>). The value must be the ID or class of the accordion body element.
    2. aria-expanded="{true|false}": Set this on the header to indicate the current state (active or inactive).
    3. aria-controls="{id}": Set this on the header to reference the ID of the body element it controls.
    4. aria-labelledby="{id}": Set this on the body element to reference the ID of the header that labels it.
    <div data-accordion="collapse">
  <h2 id="accordion-heading-1">
    <button 
      type="button" 
      data-accordion-target="#accordion-body-1" 
      aria-expanded="true" 
      aria-controls="accordion-body-1"
    >
      <span>Title</span>
    </button>
  </h2>
  <div id="accordion-body-1" class="hidden" aria-labelledby="accordion-heading-1">
    <div>Content</div>
  </div>
</div>