Preline UI - Tailwind CSS component library

Quick setup

This guide will help you get started with Preline UI, including how to run, customize, update, and integrate your project!

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.

Require via NPM

1. Install Preline UI

   Install preline via npm

   Terminal

                             
                               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 CSS Variants

   Use @source Preline UI JavaScript path and @import CSS Variants file variants.css into your Tailwind CSS file, ensuring it comes after the tailwindcss import.

   main.css

                             
                               @import "tailwindcss";
   
                               /* Preline UI */
                               /* [!code highlight:2] */
                               @source "./node_modules/preline/dist/*.js";
                               @import "./node_modules/preline/variants.css";
   
                               /* Plugins */
                               @plugin "@tailwindcss/forms";
   
                               /* Preline Themes */
                               @import "./themes/theme.css";
                             
                           

   Check out the Theme docs to learn more about Preline Themes.

3. Add the Preline UI JavaScript

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

   HTML

   <script src="./node_modules/preline/dist/preline.js"></script>

   ---

   Additional Initialization Options

   Use the non-auto entry if you need manual initialization or selective imports. In this mode, automatic initialization of elements on page load is not included, so components should be initialized explicitly (for example, with new or via static methods).

   HTML (non-auto)

   <script type="module"> // [!code highlight:3] import { HSDropdown } from "./node_modules/preline/dist/non-auto.mjs"; new HSDropdown(document.querySelector("#dropdown")); </script>

   HTML (single plugin)

   <script type="module"> import HSDropdown from "./node_modules/preline/dist/dropdown.mjs"; new HSDropdown(document.querySelector("#dropdown")); </script>

   The above example refers to dropdown, you may apply the same approach to other plugins.

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);
                        
                      

What's Preline UI?

It's an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.

Why use Preline UI?

Based on the Tailwind CSS utility classes, Preline UI's prebuilt components and UI elements help you quickly design and customize responsive mobile-first websites with diverse predefined components (such as modals, buttons, alerts, cards and more).

What's in the box?

Components are grouped by visual usability criteria (components, navigation, forms, etc.) and styled directly on top of Tailwind CSS, making them easy to extend and customize. This is a lifesaver for developers looking to create a unique and eye-catching design system without the hassle of creating each component by hand.