• 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 Explore playground demo on StackBlitz
  • 1
    Install FlyonUI

    Install flyonui via npm.

    npm i flyonui
  • 2
    Configure FlyonUI JavaScript paths

    Add the path to FlyonUI JavaScript files in your tailwind.config.ts file.

    // tailwind.config.ts
module.exports = {
  content: [
    './node_modules/flyonui/dist/js/*.js',
  ],
  plugins: [
    require('flyonui'), 
    require('flyonui/plugin')
  ],
}

    Note: If you want to include specific js component

    module.exports = {
  content: ["./node_modules/flyonui/dist/js/accordion.js"],  // Specific JS component
}
  • 3
    Add the FlyonUI JavaScript loader

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

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

...

import { type IStaticMethods } from "flyonui/flyonui";
declare global {
  interface Window {
    HSStaticMethods: IStaticMethods;
  }
}

...

export default function App() {
  const location = useLocation();

  useEffect(() => {
    const loadFlyonui = async () => {
      await import('flyonui/flyonui');
      window.HSStaticMethods.autoInit();
    };
    loadFlyonui();
  }, [location.pathname]);

  return (
    ...
  );
}

    Note: If you want to include specific js component

    import { type HSAccordion } from "flyonui/flyonui";
declare global {
  interface Window {
    HSAccordion: typeof HSAccordion;
  }
}

const loadFlyonui = async () => {
  await import('flyonui/dist/js/accordion');
  window.HSAccordion.autoInit();    // Add particular component `autoInit()` method
};