DOCSEARCHbyAlgolia
Submit Docs

Flowbite React Documentation

repository·main·Indexed 24 days ago

https://github.com/themesberg/flowbite-react

An open-source collection of interactive UI components built using React and Tailwind CSS utility classes. Includes a comprehensive library of components such as Accordion, Alert, Avatar, Badge, and Breadcrumb, along with the create-flowbite-react CLI for project scaffolding and integration guides for frameworks like Next.js, Remix, Astro, and Vite.

Tokens
65.1K
Snippets
191
Records
540
Agent score
78%

What's inside Flowbite React

  1. What is Flowbite React?

    main

    Flowbite React is an open-source UI component library built with React and Tailwind CSS. It provides a collection of production-ready, interactive components designed to accelerate web application development.

    Key features include:

    • Fully Interactive: Components handle interactivity out of the box using React's component model.
    • Tailwind CSS Based: Uses Tailwind utility classes for styling, allowing for complete customization.
    • Accessible: Built following web accessibility best practices.
    • TypeScript Ready: Provides full TypeScript support for enhanced developer experience.
    • Open Source: Distributed under the MIT license.

  2. Default Theme Settings in Flowbite React

    main

    Flowbite React uses a predefined set of theme settings for background images, box shadows, base colors, and semantic colors to ensure UI consistency.

    Background Images

    Used for various UI components (e.g., icons in dropdowns or inputs).

    Box Shadows

    Includes additional utilities like sm-light.

    Base Colors

    A full spectrum of colors including gray, red, orange, yellow, green, teal, blue, indigo, purple, and pink, each with shades from 50 to 900.

    Semantic Colors

    Flowbite React uses semantic color keys (like primary) to map specific color scales to functional roles in the UI. This allows you to change the entire look of the components by overriding a single semantic key.

  3. Flowbite React CLI development workflow

    main

    The CLI is designed to enhance your development experience by automating several tasks:

    1. Watching for component changes: Monitors your files for updates.
    2. Automatically generating class lists: Handles Tailwind CSS utility class generation.
    3. Updating configurations in real-time: Keeps your project settings in sync.
    4. Managing bundler integrations: Simplifies the connection between Flowbite React and your bundler.
    5. Providing VSCode optimizations: Offers tooling improvements for the VSCode editor.

    For optimal results, ensure your bundler is correctly configured and you have the recommended VSCode extensions installed.

  4. Ensure type safety with createTheme

    main

    The createTheme helper provides TypeScript type safety and enables Tailwind CSS IntelliSense in your IDE. It ensures that theme values are strings (where expected) and provides auto-completion for Tailwind classes within the theme object structure.

    import { createTheme } from "flowbite-react";

// Full theme customization
const theme = createTheme({
  button: {
    color: {
      primary: "bg-blue-500 hover:bg-blue-600", // ✓ Tailwind CSS IntelliSense
      custom: 123, // ✗ Type error: expected string
    },
  },
});

// Single component theme
const buttonTheme = createTheme({
  button: {
    size: {
      xl: "px-8 py-4 text-xl", // ✓ Tailwind CSS IntelliSense
    },
  },
}).button;

  6. Understand Theme Resolution Order

    main

    When a component renders, its theme is resolved using the following priority order (from highest to lowest):

    1. clearTheme: Any values specified to be removed.
    2. Component theme prop: The specific theme object passed directly to the component.
    3. applyTheme rules: Instructions on how to merge the component's theme prop with inherited values.
    4. ThemeProvider inheritance: Values inherited from the nearest parent ThemeProvider (unless the provider has the root prop set to true).
    5. Default theme: The library's built-in default component theme.

  8. Advanced component patterns for complex components

    main

    When building more complex UI elements, use these patterns to maintain themeability:

    Compound Components

    For components with multiple sub-parts (like a Card), define a nested theme structure where each part has its own base and specific properties:

    export interface CardTheme {
  root: { base: string; children: string };
  img: { base: string; horizontal: string };
  header: { base: string };
  footer: { base: string };
}

    State-Based Styling

    Include keys in your theme to handle component states like disabled or loading:

    export interface ButtonTheme {
  base: string;
  color: Record<string, string>;
  disabled: string;
  loading: string;
}

    Responsive Components

    Include size variations or visibility states within the theme object to allow easy responsive adjustments:

    export interface ModalTheme {
  base: string;
  show: { on: string; off: string };
  sizes: { sm: string; md: string; lg: string; ... };
}

  10. Blockquote layout patterns

    main

    The <Blockquote> component supports several common UI patterns:

    • Default: A standard blockquote for quoting external sources.
    • Solid Background: An alternative style using a solid background color.
    • With Icon: Displays an icon above the blockquote text content.
    • User Testimonial: Includes the author's name and occupation.
    • User Review: Includes rating stars along with the author's name and occupation.
    • Paragraph Context: Used to wrap quotes between multiple paragraph elements.

  11. Understand the build and development processes

    main

    The Flowbite React CLI operates in two primary modes:

    Development (flowbite-react dev)

    • Automatic Mode: Watches for component imports across your codebase and updates the class list in real-time.
    • Manual Mode: Generates styles only for the components listed in config.json and does not watch for new imports.

    Production (flowbite-react build)

    1. Creates the .flowbite-react output directory.
    2. Generates a final class-list.json containing all required Tailwind CSS classes (including dependencies and prefixes).
    3. Optimizes the list by removing duplicates, sorting, and converting utilities to match your specified Tailwind version.