• Set up FlyonUI with React using Tailwind CSS

Set up FlyonUI with React using Tailwind CSS

Combine FlyonUI with React and Tailwind CSS to build a sleek, responsive UI, making your development process faster and more efficient.

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

Quick React setup

React is a framework for building web user interfaces. If you haven't set up Tailwind CSS yet, check out React Tailwind CSS installation guides

FlyonUI + React(CRA) Explore playground demo on StackBlitz
FlyonUI + React(Vite) Explore playground demo on StackBlitz
FlyonUI + React(Webpack) 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

    // tailwind.config.ts
module.exports = {
  content: [
    './node_modules/flyonui/dist/js/accordion.js', // Specific JS component
  ]
};
  • 3
    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';

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

...

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

  useEffect(() => {
    const loadFlyonui = async () => {
      await import('flyonui/flyonui');
      window.HSStaticMethods.autoInit();
    };
    loadFlyonui();
  }, [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';

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

...

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

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

  return (
    ...
  );
}

export default App;