1. Getting Started
  2. Installation: Preline UI

Installation

Preline UI - Tailwind CSS component library

Preline UI is an open-source set of UI components and elements built with the world's fastest growing framework - Tailwind CSS.

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.

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

                        
                          npm i preline
                        
                      
  2. Add the Preline UI plugin

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

                        
                          module.exports = {
                            content: [
                              'node_modules/preline/dist/*.js'
                            ],
                            plugins: [
                              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:

                        
                          <script src="./assets/vendor/preline/dist/hs-ui.bundle.js"></script>