Set up FlyonUI with React using Tailwind CSS

• 1
  Install FlyonUI

  Install flyonui via npm.

  npm i flyonui

  ---

• 2
  Add FlyonUI plugin

  Include FlyonUI plugin in your index.css file.

  // index.css
  @import "tailwindcss";
  @plugin "flyonui";
  @import "flyonui/variants.css";
  @source "./node_modules/flyonui/flyonui.js"; // Add only if node_modules is gitignored
  
  /* Import Third-party override css */
  /* @import "flyonui/src/vendor/flatpickr.css"; */
  /* @import "flyonui/src/vendor/notyf.css"; */
  /* @import "flyonui/src/vendor/datatables.css"; */
  /* @import "flyonui/src/vendor/editor.css"; */
  /* @import "flyonui/src/vendor/fullcalendar.css"; */
  /* @import "flyonui/src/vendor/raty.css"; */
  /* @import "flyonui/src/vendor/waves.css"; */
  /* @import "flyonui/src/vendor/apexcharts.css"; */

  Note: If you want to include specific js component

  Tip : Using specific components helps minimize the size of the generated JavaScript and CSS.

  // index.css
  @source "./node_modules/flyonui/dist/accordion.js" // Specific JS component

  ---

• 3
  Add type definitions for FlyonUI

  Create the global.d.ts file in the project root directory.

  // global.d.ts
  import { IStaticMethods } from "flyonui/flyonui";
  
  declare global {
    interface Window {
      // Optional third-party libraries
      _;
      $: typeof import("jquery");
      jQuery: typeof import("jquery");
      DataTable;
      Dropzone;
  
      HSStaticMethods: IStaticMethods;
    }
  }
  
  export {};

  Note: If you want to include specific js component

  // global.d.ts
  import { HSAccordion } from "flyonui/flyonui";
  
  declare global {
    interface Window {
      HSAccordion: typeof HSAccordion;
    }
  }
  
  export {};

  ---

• 4
  Add a reinitialization helper

  Add code that reinitializes the components every time when app is mounted or page was changed root_directory/src/App.tsx

  import { useEffect } from 'react';
  import { useLocation } from 'react-router-dom';
  
  // Optional third-party libraries
  import $ from 'jquery';
  import _ from 'lodash';
  import noUiSlider from 'nouislider';
  import 'datatables.net';
  import 'dropzone/dist/dropzone-min.js';
  
  window.$ = $;
  window._ = _;
  window.jQuery = $;
  window.DataTable = $.fn.dataTable;
  window.noUiSlider = noUiSlider;
  
  async function loadFlyonUI() {
    return import('flyonui/flyonui');
  }
  
  ...
  
  function App() {
    const location = useLocation();
  
    useEffect(() => {
      const initFlyonUI = async () => {
        await loadFlyonUI();
      };
  
      initFlyonUI();
    }, []);
  
    useEffect(() => {
      setTimeout(() => {
        if (
          window.HSStaticMethods &&
          typeof window.HSStaticMethods.autoInit === 'function'
        ) {
          window.HSStaticMethods.autoInit();
        }
      }, 100);
    }, [location.pathname]);
  
    return (
      ...
    );
  }
  
  export default App;

  Note: If you want to include specific js component

  import { useEffect } from 'react';
  import { useLocation } from 'react-router-dom';
  
  async function loadFlyonUI() {
    return import('flyonui/dist/accordion.js');
  }
  
  ...
  
  function App() {
    const location = useLocation();
  
    useEffect(() => {
      const initFlyonUI = async () => {
        await loadFlyonUI();
      };
  
      initFlyonUI();
    }, []);
  
    useEffect(() => {
      setTimeout(() => {
        if (
          window.HSAccordion &&
          typeof window.HSAccordion.autoInit === 'function'
        ) {
          window.HSAccordion.autoInit();
        }
      }, 100);
    }, [location.pathname]);
  
    return (
      ...
    );
  }
  
  export default App;

Icons

For icons setup you can refer Icons page.