DOCSEARCHbyAlgolia
Submit Docs

Flowbite - Tailwind CSS Components

website·Indexed 37 days ago

https://flowbite.com/docs/

An open-source library of interactive components and plugins built with Tailwind CSS. Flowbite provides a wide array of UI elements including tabs, modals, navbars, and forms, with dedicated integration guides for frameworks like React, Vue 3, Svelte, SolidJS, Qwik, and Ruby on Rails, as well as support for TypeScript.

Tokens
219.4K
Snippets
711
Records
781
Agent score
72%

What's inside Flowbite

  1. Overview of TypeUI for Flowbite

    TypeUI is an open-source CLI tool that generates and distributes SKILL.md files. These files act as portable design blueprints that instruct AI coding agents (such as Cursor, Claude Code, Codex, OpenCode, and Gemini CLI) to follow a consistent design system. When used with Flowbite, TypeUI allows developers to apply specific style guides to Flowbite's theming system, ensuring AI-generated interfaces remain consistent and reducing token usage during generation.

  2. Overview of Flowbite MCP Server

    Flowbite MCP is an open-source Model Context Protocol (MCP) server that provides AI development tools (like Cursor, Windsurf, and Claude) with the necessary context to generate high-quality UI code using Tailwind CSS and Flowbite. It supports multiple frameworks including HTML, React, and Svelte, and includes specialized tools for Figma-to-code conversion and theme generation.

  3. Implement a Hero section in Qwik using Flowbite

    To create a Hero section in a Qwik project with Flowbite and Tailwind CSS, define a component using the hero$ wrapper. This ensures the component is optimized for Qwik's lazy-loading architecture. The component uses standard Tailwind CSS utility classes for styling and layout, including dark mode support (e.g., dark:bg-gray-900).
    export default hero$(() => {
  return (
    <section class="bg-white dark:bg-gray-900">
      <div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-12">
        <a href="#" class="inline-flex justify-between items-center py-1 px-1 pr-4 mb-7 text-sm text-gray-600 bg-gray-100 rounded-full dark:bg-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700" role="alert">
          <span class="text-xs bg-blue-600 rounded-full text-white px-4 py-1.5 mr-3">New</span>
          <span class="text-sm font-medium">Flowbite is out! See what's new</span>
          <svg class="ml-2 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          </svg>
        </a>
        <h1 class="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">
          We invest in the world’s potential
        </h1>
        <p class="mb-8 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 xl:px-48 dark:text-gray-400">
          Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
        </p>
        <div class="flex flex-col mb-8 lg:mb-16 space-y-4 sm:flex-row sm:justify-center sm:space-y-0 sm:space-x-4">
          <a href="#" class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900">
            Learn more
            <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
            </svg>
          </a>
          <a href="#" class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-gray-900 rounded-lg border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:text-white dark:border-gray-700 dark:hover:bg-gray-700 dark:focus:ring-gray-800">
            <svg class="mr-2 -ml-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"></path>
            </svg>
            Watch video
          </a>
        </div>
      </div>
    </section>
  );
});

  4. Implement a basic responsive sidebar with Flowbite

    The Flowbite sidebar component provides a responsive navigation list that can be positioned on either the left or right side of a web application. It is designed to work as a complementary element to a navbar and can contain menu items, multi-level menus, and call-to-action elements.

  5. Add helper text to a file input

    To provide users with information about allowed file extensions or size limits, add a descriptive paragraph below the input. Use the aria-describedby attribute on the input element to link it to the helper text for accessibility.
    <label class="block mb-2.5 text-sm font-medium text-heading" for="file_input">Upload file</label>
<input class="cursor-pointer bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs placeholder:text-body" aria-describedby="file_input_help" id="file_input" type="file">
<p class="mt-1 text-sm text-gray-500 dark:text-gray-300" id="file_input_help">SVG, PNG, JPG or GIF (MAX. 800x400px).</p>

  6. Framework compatibility for Flowbite

    Flowbite provides dedicated integration guides for the following frameworks and libraries to enable the use of its interactive components and utility classes:

    • React
    • Next.js
    • Vue.js
    • Nuxt
    • Laravel
    • Svelte
    • Ruby on Rails
    • Django
    • Flask

  9. Configure the root route in Ruby on Rails

    To set the homepage as the root page of your Rails application, modify the config/routes.rb file to map the root URL to the home action of the PagesController.
    # config/routes.rb
root to: 'pages#home'

  10. Display descriptive text inside Speed Dial buttons

    Instead of using tooltips, you can configure the Speed Dial component to show descriptive text directly inside the action buttons. This is useful for improving accessibility and immediate recognition of the action without requiring a hover state.

  11. Install Tailwind CSS in a Blazor project

    Integrate Tailwind CSS into Blazor using the Tailwind CLI. This involves installing the packages via NPM, creating an input CSS file with the Tailwind directive, and generating an output CSS file that is then referenced in the project's HTML entry point.
    # 1. Install Tailwind CSS and CLI
npm install tailwindcss @tailwindcss/cli --save-dev

# 2. Generate output CSS and watch for changes
npx tailwindcss -i wwwroot/css/input.css -o wwwroot/css/output.css --watch

    File Setup:

    1. Create wwwroot/css/input.css with the content: @import "tailwindcss";
    2. In wwwroot/index.html, add the reference to the generated CSS and remove default Blazor/Bootstrap styles:
    <link rel="stylesheet" href="css/output.css" />

  12. Install and configure Flowbite in Django

    Flowbite is installed as an NPM dependency. To enable its styles, import the desired Flowbite theme (Default, Minimal, Enterprise, Playful, or Mono) into your main input.css file.
    npm install flowbite --save
    /* static/src/input.css */
@import "tailwindcss";

/* Example: Default Theme */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import "flowbite/src/themes/default";