This page will help you get started with Preline Pro, including how to run, and integrate your project.

Quick setup

First, you need to make sure that you have a working Tailwind CSS project installed and that you also have Node and NPM installed on your machine.

Then you need to install Preline UI.

Require via NPM

  1. Install Preline UI

    Install preline via npm

    npm i 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

  2. Add the Preline UI plugin

    Include Preline UI as a plugin in the tailwind.config.js file.

    // tailwind.config.jsmodule.exports = {  content: [    // './src/**/*.{html,js}',      'node_modules/preline/dist/*.js',  ],  plugins: [    // require('@tailwindcss/forms'),      require('preline/plugin'),  ],}
  3. Add the Preline UI JavaScript

    Include the JavaScript <script> that powers the interactive elements near the end of your </body> tag:

    // index.html<script src="./node_modules/preline/dist/preline.js"></script>
  4. Install the third-party plugins

    Certain Examples in Preline Pro make use of third-party plugins such as Charts, Datamaps, WYSIWYG Editor, and Clipboard.

    Ensure you install these plugins if you intend to utilize them; otherwise, you can skip this step if none of them are needed.

For those unfamiliar with Preline UI, it's advisable to explore the Preline UI documentation to maximize your understanding and utilization of the framework.


Get all the latest Preline updates and news.