Installation
Setting up Preline UI in a React + Vite project using Tailwind CSS.
Please note that the plugin has been tested with 19.0.0 version of the React and 6.3.1 version of the Vite. The framework was installed using the npm create vite@latest <project name> -- --template react-ts command.
If you are using your own project structure or a different version, pay attention to the file paths and features of your version!
The React Framework for the Web. If you haven't set up Tailwind CSS yet, check out React + Vite Tailwind CSS installation guides.
Some components require third-party libraries. The settings below assume full use of Preline UI, including preloaded dependencies. If you do not intend to use those components that rely on third-party libraries, you may exclude them from your configuration.
Install Preline using your preferred package manager.
npm install preline
Please note, Preline UI uses Tailwind CSS Forms plugin in all form components. Don't forget to install it, if you haven't done so already: npm install -D @tailwindcss/forms
Include Preline in your index.css file, e.g. projects_root_directory/src/index.css
@import "tailwindcss";
@import "preline/variants.css";
@source "../node_modules/preline/dist/*.js";
/* Optional Preline UI Datepicker Plugin */
/* @import "preline/src/plugins/datepicker/styles.css"; */
/* Plugins */
/* @plugin "@tailwindcss/forms"; */
Create the global.d.ts file in the project root directory, e.g.
projects_root_directory/src/global.d.ts
import type { DataTable } from "datatables.net";
import type { Dropzone } from "dropzone";
import type { VanillaCalendarPro } from "vanilla-calendar-pro";
import type { noUiSlider } from "nouislider";
import type { IStaticMethods } from "preline/dist";
declare global {
interface Window {
_;
$: typeof import("jquery");
jQuery: typeof import("jquery");
DataTable: typeof DataTable;
Dropzone: typeof Dropzone;
VanillaCalendarPro: typeof VanillaCalendarPro;
noUiSlider: typeof noUiSlider;
HSStaticMethods: IStaticMethods;
}
}
export {};
Add external libraries to your project:
projects_root_directory/src/main.tsx
...
import $ from 'jquery';
import _ from 'lodash';
import noUiSlider from 'nouislider';
import 'datatables.net';
import 'dropzone/dist/dropzone-min.js';
import * as VanillaCalendarPro from 'vanilla-calendar-pro';
window._ = _;
window.$ = $;
window.jQuery = $;
window.DataTable = $.fn.dataTable;
window.noUiSlider = noUiSlider;
window.VanillaCalendarPro = VanillaCalendarPro;
...
createRoot(document.getElementById('root')!).render(
...
);
Initialize Preline UI inside your entry point, e.g. projects_root_directory/src/App.tsx.
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
...
async function loadPreline() {
return import('preline/dist/index.js');
}
function App() {
const location = useLocation();
useEffect(() => {
const initPreline = async () => {
await loadPreline();
if (
window.HSStaticMethods &&
typeof window.HSStaticMethods.autoInit === 'function'
) {
window.HSStaticMethods.autoInit();
}
};
initPreline();
}, [location.pathname]);
return (
...
)
}
export default App
Please note, Preline UI comes with some opinionated styles that are applied to components by default. If you want these styles in your project, you may include them into your CSS file. These styles used to come by default in Tailwind v3, so we decided to keep them in Preline UI.
/* 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);
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.