2. Frameworks
  3. Next.js

Installation

Install Preline UI with Next.js using Tailwind CSS

Setting up Preline UI in a Next.js project using Tailwind CSS.

Installation

Please note that the plugin has been tested with the latest version of the framework (v14.0.1). The framework was installed using the standard npx create-next-app@latest command.
If you are using your own project structure or a different version, pay attention to the file paths and features of your version!

Quick Next.js setup

The React Framework for the Web. If you haven't set up Tailwind CSS yet, check out Next.js Tailwind CSS installation guides.

Preline UI + Next.js

  1. Install Preline UI

    Install preline via npm or yarn. 

    // Terminal or Shellnpm install preline // or yarn add preline

  2. Configure Preline UI JavaScript paths

    Add the path to Preline UI JavaScript files in your tailwind.config.js file. 

    // tailwind.config.jsmodule.exports = {  content: [      './node_modules/preline/preline.js',  ],  plugins: [      require('preline/plugin'),  ],}

  3. Create Preline UI JavaScript loader

    Create the Preline UI JavaScript loader inside the project, e.g. projects_root_directory/app/components/PrelineScript.tsx 

                          
                        "use client";

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

                        import { IStaticMethods } from "preline/preline";
                        declare global {
                          interface Window {
                            HSStaticMethods: IStaticMethods;
                          }
                        }
                        
                        export default function PrelineScript() {
                          const path = usePathname();
                        
                          useEffect(() => {
                            const loadPreline = async () => {
                              await import("preline/preline");

                              window.HSStaticMethods.autoInit();
                            };

                            loadPreline();
                          }, [path]);
                        
                          return null;
                        }

  4. Add the Preline UI JavaScript loader

    Add the Preline UI JavaScript loader to your app entry point, e.g. projects_root_directory/app/layout.tsx. 

                          
                        ...
                        
                        import PrelineScript from "./components/PrelineScript";
                        
                        ...
                        
                        export default function RootLayout({
                          children,
                        }: {
                          children: React.ReactNode;
                        }) {
                          return (
                            <html>
                              ...

                              <PrelineScript />
                            </html>
                          );
                        }

Community Workarounds

Check out this section for community-shared tips and tricks. It's a spot for finding those handy hacks and solutions that enhance your experience with Preline UI.

NextJS 13 example

by @yoDon