• Set up FlyonUI with NextJS using Tailwind CSS

Set up FlyonUI with NextJS using Tailwind CSS

Use FlyonUI with Next.js and Tailwind CSS to design a cutting-edge, responsive interface, optimizing your development experience.

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

Quick Next.js setup

Next.js is a React framework for server-side rendering and static site generation. If you haven't set up Tailwind CSS yet, Next.js Tailwind CSS check out installation guides.

FlyonUI + Next.js Check out the starterkit
  • 1
    Install FlyonUI

    Install flyonui via npm.

    npm i flyonui
  • 2
    Add FlyonUI plugin

    Include FlyonUI plugin in your global.css file.

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

    // global.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
    Create FlyonUI JavaScript loader

    Create the FlyonUI JavaScript loader inside the project, e.g. root_directory/components/FlyonuiScript.tsx

    // FlyonuiScript.tsx
'use client';

import { usePathname } from 'next/navigation';
import { useEffect } from '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 FlyonuiScript() {
  const path = usePathname();

  useEffect(() => {
    const initFlyonUI = async () => {
      await loadFlyonUI();
    };

    initFlyonUI();
  }, []);

  useEffect(() => {
    setTimeout(() => {
      if (
        window.HSStaticMethods &&
        typeof window.HSStaticMethods.autoInit === 'function'
      ) {
        window.HSStaticMethods.autoInit();
      }
    }, 100);
  }, [path]);

  return null;
}

    Note: If you want to include specific js component

    // FlyonuiScript.tsx
'use client';

import { usePathname } from 'next/navigation';
import { useEffect } from 'react';


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

export default function FlyonuiScript() {
  const path = usePathname();

  useEffect(() => {
    const initFlyonUI = async () => {
      await loadFlyonUI();
    };

    initFlyonUI();
  }, []);

  useEffect(() => {
    setTimeout(() => {
      if (
        window.HSAccordion &&
        typeof window.HSAccordion.autoInit === 'function'
      ) {
        window.HSAccordion.autoInit();
      }
    }, 100);
  }, [path]);

  return null;
}
  • 5
    Add the FlyonUI JavaScript loader

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

    ...

import FlyonuiScript from '../components/FlyonuiScript';

...

export default function RootLayout({ children, }: { children: React.ReactNode; }) {
  return (
    <html>
      ...
      <body>
        ...
        <FlyonuiScript />
      </body>
    </html>
  );
}

Icons

For icons setup you can refer Icons page.