• Set up FlyonUI with Remix using Tailwind CSS

Set up FlyonUI with Remix using Tailwind CSS

Integrate FlyonUI with Remix and Tailwind CSS to create a modern, responsive UI, streamlining your development process for faster and more efficient results.

https://cdn.flyonui.com/fy-assets/icons/remix-icon.png
Remix logo

Quick Remix setup

Remix is a full stack React web framework. If you haven't set up Tailwind CSS yet, check out Remix Tailwind CSS installation guides.

FlyonUI + Remix Check out the starterkit
  • 1
    Install FlyonUI

    Install flyonui via npm.

    npm i flyonui
  • 2
    Add FlyonUI plugin

    Include FlyonUI plugin in your tailwind.css file.

    // tailwind.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

    // tailwind.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 the FlyonUI JavaScript loader

    Add the FlyonUI JavaScript loader to your app entry point, e.g. root_directory/app/root.tsx

    import { useEffect } from "react";
import {
  ...
  useLocation,
} from "@remix-run/react";

// 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');
}

...

export default 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 (
    ...
  );
}

    Note: If you want to include specific js component

    import { useEffect } from "react";
import {
  ...
  useLocation,
} from "@remix-run/react";

async function loadFlyonUI() {
  return import('flyonui/dist/accordion.js');
}

... 

export default 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 (
    ...
  );
}

Icons

For icons setup you can refer Icons page.