Install Preline UI with Next.js using Tailwind CSS

1. Install Preline UI

   Install preline with your preferred package manager.

   Terminal

                             
                               npm install preline
                             
                           

   Preline UI uses the Tailwind CSS Forms plugin across form components. If you have not added it yet, install it with npm install -D @tailwindcss/forms.

   The steps below wire up the full set of Preline UI components, including the ones that rely on third-party libraries (Datatable, Datepicker, Range Slider, File Upload). Install those libraries and their TypeScript types now, so the global.d.ts and PrelineClient.tsx steps below have everything they import:

   Terminal

                               
                                 npm install jquery lodash nouislider dropzone datatables.net-dt vanilla-calendar-pro
                                 npm install -D @types/jquery @types/lodash @types/dropzone
                               
                             

   If you don't use Datatable, Datepicker, Range Slider, or File Upload, skip whichever of these your project doesn't need, along with the matching lines in the steps below.

2. Include Preline CSS

   Import Preline into your global.css file, for example project_root_directory/app/globals.css.

   global.css

                             
                               @import "tailwindcss";
   
                               @import "preline/variants.css";
                               @source "../node_modules/preline/dist/*.js";
   
                               /* Optional Preline UI Datepicker Plugin */
                               /* @import "preline/datepicker-styles-utility.css"; */
   
                               /* Plugins */
                               /* @plugin "@tailwindcss/forms"; */
   
                               /* Preline Themes */
                               @import "preline/theme.css";
   
                               /* Optional Preline UI Datatable Plugin: DataTables.net renders its own
                                  search/length/paging controls alongside Preline's own; hide the native
                                  ones since they can't be disabled through DataTables options alone. */
                               /*
                               .dt-layout-row:has(.dt-search),
                               .dt-layout-row:has(.dt-length),
                               .dt-layout-row:has(.dt-paging) {
                                 display: none !important;
                               }
                               */
                             
                           

   See the Theme docs to learn more about Preline Themes.

3. Add type definitions for Preline

   Create a global.d.ts file for the shared window typings, for example project_root_directory/global.d.ts.

   global.d.ts

                             
                               import type { JQueryStatic } from "jquery";
                               import type _ from "lodash";
                               import type Dropzone from "dropzone";
                               import type noUiSlider from "nouislider";
                               import type DataTable from "datatables.net-dt";
                               import type { Calendar } from "vanilla-calendar-pro";
   
                               declare global {
                                 interface Window {
                                   // Optional third-party libraries
                                   $: JQueryStatic
                                   jQuery: JQueryStatic
                                   _: typeof _
                                   Dropzone: typeof Dropzone
                                   noUiSlider: typeof noUiSlider
                                   DataTable: typeof DataTable
                                   VanillaCalendarPro: typeof Calendar
                                 }
                               };
   
                               export {};
                             
                           

4. Create Preline UI JavaScript loader

   Create a client-side Preline UI loader component inside project_root_directory/app/components/PrelineClient.tsx. Use the preline/non-auto entry, not the bare preline entry: it exposes HSStaticMethods as a normal named export, so nothing needs to read it back off window.

   PrelineClient.tsx

                             
                               "use client";
   
                               import { usePathname } from "next/navigation";
                               import { useEffect } from "react";
   
                               // Optional third-party libraries
                               import $ from "jquery";
                               import _ from "lodash";
                               import Dropzone from "dropzone";
                               import noUiSlider from "nouislider";
                               import DataTable from "datatables.net-dt";
                               import { Calendar } from "vanilla-calendar-pro";
   
                               window.$ = $;
                               window.jQuery = $;
                               window._ = _;
                               window.Dropzone = Dropzone;
                               window.noUiSlider = noUiSlider;
                               window.DataTable = DataTable;
                               window.VanillaCalendarPro = Calendar;
   
                               // Preline UI
                               export default function PrelineClient() {
                                 const pathname = usePathname();
   
                                 useEffect(() => {
                                   let cancelled = false;
   
                                   import("preline/non-auto").then(({ HSStaticMethods }) => {
                                     if (cancelled) return;
                                     HSStaticMethods.cleanCollection();
                                     HSStaticMethods.autoInit();
                                   });
   
                                   return () => {
                                     cancelled = true;
                                   };
                                 }, [pathname]);
   
                                 return null;
                               }
                             
                           

   No next/dynamic wrapper or ssr: false is needed here. "use client" alone is enough to keep this component's code out of the server render; every window access already lives inside useEffect or the dynamic import("preline/non-auto"), both of which only run in the browser after mount. cleanCollection() before autoInit() matters on every pathname change, not just the first run. See Using Preline UI with Next.js for why.

5. Add the Preline UI JavaScript loader

   Add the Preline UI loader to your app entry point, for example project_root_directory/app/layout.tsx.

   layout.tsx

                             
                               ...
   
                               import PrelineClient from './components/PrelineClient';
   
                               ...
   
                               export default function RootLayout({ children }: LayoutProps<"/">) {
                                 return (
                                   <html>
                                     <body>
                                       {children}
                                       <PrelineClient />
                                     </body>
                                   </html>
                                 );
                               }
                             
                           

   LayoutProps<"/"> is the typed-routes helper the current create-next-app scaffold generates for the root layout's props. If your project predates it or has typed routes turned off, use { children: React.ReactNode } instead: both describe the same shape.

Optional Preline UI styles

                        
                          /* Adds pointer cursor to buttons */
                          @layer base {
                            button:not(:disabled),
                            [role="button"]:not(:disabled) {
                              cursor: pointer;
                            }
                          }

                          /* Defaults hover styles on all devices */
                          @custom-variant hover (&:hover);
                        
                      

Specific guide

Continue with a focused guide for wiring Preline UI JavaScript plugins into this framework.