[email protected]

Patch Changes

• #1549 7327e55 Thanks @SutuSebastian! - fix file watcher ignore directory logic leading to false positives

[email protected]

Patch Changes

• c54183b Thanks @SutuSebastian! - add orphan classNames to the theme object

[email protected]

Patch Changes

• #1546 4e90ee8 Thanks @SutuSebastian! - add Parcel server-bun and server-deno templates

[email protected]

Patch Changes

• #1543 868e485 Thanks @SutuSebastian! - add new migrate CLI command

  • add new transformer from compound components to singular imports

    import { Button } from "flowbite-react";
    
    // from
    <Button.Group>
      <Button>tab 1</Button>
      <Button>tab 2</Button>
      <Button>tab 3</Button>
    </Button.Group>
    
    // to
    import { Button, ButtonGroup } from "flowbite-react";
    
    <ButtonGroup>
      <Button>tab 1</Button>
      <Button>tab 2</Button>
      <Button>tab 3</Button>
    </ButtonGroup>

[email protected]

Patch Changes

• #1541 af49b10 Thanks @SutuSebastian! - fix(ui~cli): path normalzation for windows support (setup plugins paths)

• #1539 6caecce Thanks @SutuSebastian! - refactor(Alert): onDismiss prop

  • Changed the type of onDismiss prop in Alert component from boolean to a function type
  • Removed onDismiss default values from various Alert stories to align with the updated prop type

[email protected]

Patch Changes

• #1535 bd5ead5 Thanks @SutuSebastian! - fix schema.json: add missing dark field in required

[email protected]

Minor Changes

• #1498 169b5dd Thanks @SutuSebastian! - ## Summary

  This release brings massive improvements to Flowbite React's capabilities, introducing the first automatic Tailwind CSS class generation system and native support for both Tailwind CSS v3 and v4. Key highlights include:

  • Automatic Class Generation: First UI library to automatically detect and generate Tailwind CSS classes
  • Tailwind CSS v4 Support: Native compatibility with both Tailwind CSS v3 and v4
  • Comprehensive Prefix Support: Complete system for customizing class prefixes
  • Enhanced CLI Tools: New project initialization and component creation commands
  • Expanded Framework Support: 15 new framework integration guides and templates

  New Engine

  Automatic Class Generation

  • First UI library to implement automatic Tailwind CSS class detection
  • Only includes styles for components you actually import and use
  • Works like tree-shaking but for Tailwind CSS classes
  • Real-time class list updates during development
  • Optimized production builds with minimal CSS output

  Learn more about class generation in our CLI documentation.

  One-Command Setup

  npx flowbite-react@latest init

  This single command:

  • Detects your project's environment
  • Installs necessary dependencies
  • Configures Tailwind CSS
  • Sets up the appropriate bundler plugin
  • Creates optimal VSCode configuration
  • Initializes the .flowbite-react directory

  See our quickstart guide for detailed setup instructions.

  Smart Version Handling

  • Automatic detection of Tailwind CSS version (v3 or v4)
  • No manual configuration needed
  • Adapts class generation to version-specific syntax
  • Ensures compatibility with both versions simultaneously

  Read more about version compatibility in our compatibility guide.

  Major Features

  1. Enhanced Integration Support

  • Added new framework integration guides and templates:
    • AdonisJS
    • Astro
    • Blitz.js
    • Bun
    • ESBuild
    • Farm
    • Gatsby
    • Laravel
    • Meteor.js
    • Modern.js
    • Next.js
    • Parcel
    • React Router
    • React Server
    • RedwoodJS
    • Remix
    • Rsbuild
    • Rspack
    • TanStack Router
    • TanStack Start
    • Vike
    • Vite
    • Waku
    • Webpack

  2. Prefix Support System

  • Added support for customizing Tailwind CSS class prefixes

  • Different configuration options for Tailwind CSS v3 and v4:

    // Tailwind CSS v3
    /** @type {import('tailwindcss').Config} */
    export default {
      prefix: "tw-",
      // ... rest of your config
    };
    
    // Tailwind CSS v4
    @import "tailwindcss" prefix(tw);

  • Prefix configuration in .flowbite-react/config.json:

    {
      "$schema": "https://unpkg.com/flowbite-react/schema.json",
      "prefix": "tw"
    }

  • ThemeConfig component support for prefix configuration:

    import { ThemeConfig } from "flowbite-react";
    
    export default function App() {
      return (
        <>
          <ThemeConfig prefix="tw" />
          {/* ... */}
        </>
      );
    }

  Learn more about prefix configuration in our prefix documentation.

  3. CLI Enhancements

  • New project initialization command:

    npx flowbite-react@latest init

  Learn more about CLI features in our CLI documentation.

  4. Tailwind CSS Version Compatibility

  • Automatic version detection between Tailwind CSS v3 and v4
  • Seamless support for both versions without manual configuration
  • Improved class merging and prefix handling for each version

  5. Configuration System

  • New .flowbite-react/config.json for centralized configuration (automatically generated):

    {
      "$schema": "https://unpkg.com/flowbite-react/schema.json",
      "components": [],
      "dark": true,
      "path": "src/components",
      "prefix": "",
      "rsc": true,
      "tsx": true
    }

  Learn more about configuration options in our config documentation.

  6. Custom Components

  Component Creation

  • Added CLI command for component generation:

    npx flowbite-react@latest create my-component

  • Automatic setup based on .flowbite-react/config.json configuration:

    • Component path location
    • React Server Components support
    • TypeScript/JavaScript selection

  Theme System Integration

  • Full theming system support for custom components:
    • Global theme inheritance
    • Component-level overrides
    • Provider-level props
    • Theme clearing and applying
    • Type safety with TypeScript

  Technical Improvements

  Build System

  • Improved bundler compatibility and performance
  • Added support for tree-shaking
  • Enhanced TypeScript configuration
  • Optimized production builds

  Component Updates

  • Improved component primitives
  • Enhanced type safety across components
  • Added extensive test coverage

  Developer Experience

  • Added comprehensive TypeScript types
  • Improved VSCode integration
  • Enhanced debugging capabilities

  Exports and Package Structure

  • All components, hooks, and utilities are now exported from the root package
  • Every internal part and primitive is exposed for advanced customization
  • Improved module resolution with better tree-shaking support
  • Direct access to component parts without compound components
  • TypeScript types for all exports are available

  Breaking Changes

  Component Changes

  • Deprecated compound components in favor of simpler component primitives:

    // Before - Compound components
    <Accordion>
      <Accordion.Panel>
        <Accordion.Title>Title 1</Accordion.Title>
        <Accordion.Content>Content 1</Accordion.Content>
      </Accordion.Panel>
    </Accordion>
    
    // After - Simple primitives
    <Accordion>
      <AccordionPanel>
        <AccordionTitle>Title 1</AccordionTitle>
        <AccordionContent>Content 1</AccordionContent>
      </AccordionPanel>
    </Accordion>

  • Removed helperText prop from all form components in favor of using the HelperText component directly

  • Deprecated href prop in Badge component

  • Updated Button component to use new color system:

    • Added default and alternative colors
    • Changed default color from blue to default
    • Modified hover states to use primary colors
    • Moved theme size styles from inner span to root button element

  Theme System

  • Changed theme application behavior:
    • Enhanced ThemeProvider with deep merging of themes
    • Added support for granular theme resets using clearTheme
    • Improved theme resolution with better performance
    • Updated color schemes to use primary colors consistently
  • Modified component color schemes:
    • Updated default colors to use primary instead of specific colors (e.g., cyan)
    • Standardized color naming across components
    • Enhanced color inheritance and theme customization

  Learn more about...

[email protected]

Minor Changes

• #1498 169b5dd Thanks @SutuSebastian! - - Added new project templates:

  • blitzjs - Blitz.js
  • bun - Bun
  • esbuild - ESBuild
  • farm - Farm
  • meteorjs - Meteor.js
  • modernjs - Modern.js
  • react-router - React Router
  • react-server - React Server
  • rsbuild - Rsbuild
  • rspack - Rspack
  • tanstack-router - TanStack Router
  • tanstack-start - TanStack Start
  • vike - Vike
  • waku - Waku
  • webpack - Webpack

[email protected]

Patch Changes

• #1190 25bb353 Thanks @ddiasfront! - ### Datepicker Component Updates

  The Datepicker has been enhanced with several improvements:

  1. Controlled Inputs: Supports controlled inputs via value and defaultValue props, enabling programmatic date updates without manual clicks.
  2. State Management: Optimized internal state management using useMemo and useEffect.
  3. Documentation: Added sections in documentation for controlled usage and handling null values.
  4. Test Cases: Comprehensive unit tests added for date handling.
  5. Storybook: Improved stories, showcasing different states (controlled/uncontrolled).

  Files Updated:

  • apps/web/content/docs/components/datepicker.mdx: Added controlled usage section.
  • Datepicker.spec.tsx: Added unit tests.
  • Datepicker.stories.tsx: Enhanced story variants.
  • Datepicker.tsx: Expanded DatepickerProps.
  • DatepickerContext.tsx: Adjusted selectedDate type.
  • Decades.tsx, Months.tsx, Years.tsx: Updated logic to check for selectedDate.

• #1484 38913e5 Thanks @KRTirtho! - fix: autocomplete for string enums with dynamic value not working

What's Changed

• revamp homepage and docs styles by @SutuSebastian in #1442
• Fix/datepicker decade picker unclickable by @Maraket in #1452
• Web/fixes by @SutuSebastian in #1461
• fix(datepicker) duplicate month display #1456 by @khareembld in #1457
• SEO: a11y + open external links in new tabs by @SutuSebastian in #1463
• fix: not allowing to select other year by @khareemnurulla in #1465
• chore: up packages by @SutuSebastian in #1464
• chore: Make label prop optional in Dropdown component by @raky291 in #1468
• Docs: not found page by @SutuSebastian in #1476
• fix: autocomplete for string enums with dynamic value not working by @KRTirtho in #1484
• Feat/date value datepicker by @ddiasfront in #1190

New Contributors

• @Maraket made their first contribution in #1452
• @khareembld made their first contribution in #1457
• @khareemnurulla made their first contribution in #1465
• @raky291 made their first contribution in #1468
• @KRTirtho made their first contribution in #1484
• @ddiasfront made their first contribution in #1190

Full Changelog: https://github.com/themesberg/flowbite-react/compare/[email protected]@0.10.2

[email protected]

Patch Changes

• #1433 a5d008e Thanks @SutuSebastian! - add AdonisJS integration guide