Installation
Preline UI is an open-source set of UI components and elements built with the world's fastest growing framework - Tailwind CSS.
It's an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
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).
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.
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.
Install preline via npm
npm i preline
Include Preline UI as a plugin in the tailwind.config.js file.
module.exports = {
content: [
'node_modules/preline/dist/*.js'
],
plugins: [
require('preline/plugin')
]
}
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>
Often the biggest challenge when working with a framework is figuring out what you're supposed to do when there's something you need that the framework doesn't handle for you.
Preline plugins have been designed from the ground up to be extensible and customizable, so that no matter what you're building you never feel like you're fighting the framework.
This guide covers topics like how our plugins work with Tailwind.
Plugins can be added to your project by installing them via npm, adding them to your tailwind.config.js and then adding them to your HTML-file. Learn more here.
Here is an example of what our library markup might look like.
<div class="hs-dropdown">
<button type="button" class="hs-dropdown-toggle">
<!-- ... -->
</button>
<div class="hs-dropdown-menu">
<!-- ... -->
</div>
</div>
Every utility class can be applied conditionally to classes in our plugins, making it easy to create complex interfaces without ever leaving your HTML.
To add a utility to active or opening classes, all you need to do is prefix the utility with the : character:
<div class="hs-dropdown-open:opacity-100 opacity-0">
<!-- ... -->
</div>
This works for every utility class in the framework, which means you can build any design solution — you can even control things like letter spacing or cursor styles.
Here's an example of a dropdown component:
<div class="hs-dropdown relative inline-flex">
<button id="hs-dropdown-slideup-animation" type="button" class="hs-dropdown-toggle py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-gray-800 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800">
Actions
<svg class="hs-dropdown-open:rotate-180 w-2.5 h-2.5 text-gray-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-72 hidden z-10 transition-[margin,opacity] opacity-0 duration-300 mt-2 min-w-[15rem] bg-white shadow-md rounded-lg p-2 dark:bg-gray-800 dark:border dark:border-gray-700 dark:divide-gray-700" aria-labelledby="hs-dropdown-slideup-animation">
<!-- ... -->
</div>
</div>
Here's how the example above works:
hs-dropdown-toggle triggers the dropdown.hs-dropdown-open has no styles and we use opacity-0 to hide the dropdown before it's triggered, but by adding hs-dropdown-open:opacity-100 utility we turn the opacity up to 100%.rotate-180 to rotate the arrow 180deg when it's active.They even go along with the framework's dark mode class.
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
<div class="dark:hs-accordion-active:text-fuchsia-600">
<!-- ... -->
</div>
Preline plugins work well with when used with other frameworks like Bootstrap, Angular Material, and others. To avoid attribute name overlap, we added a unique hs- prefix.
<div class="hs-dropdown" data-hs-dropdown-trigger="hover">
<!-- ... -->
</div>