• 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 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
    Create FlyonUI JavaScript loader

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

    'use client';

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

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

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

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

  return null;
}

    Note: If you want to include specific js component

    'use client';

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

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

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

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

  return null;
}
  • 4
    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 '../scripts/FlyonuiScript';

...

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