Tailwind Resources Logo Tailwind Resources
Preline screenshot

Preline

Author Avatar Theme by Htmlstreamofficial
Updated: 26 Apr 2025
5532 Stars

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.

Github Live Preview

Categories

Ui kits & component libraries

Overview:

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework. It offers a range of prebuilt components and UI elements that help designers quickly design and customize responsive mobile-first websites. These components include buttons, dropdowns, navigation bars, modals, and more. Preline UI is designed to make it easy for developers to create a unique and eye-catching design system without the hassle of creating each component from scratch.

Features:

  • Wide range of prebuilt components: Preline UI offers a variety of prebuilt components and UI elements that are essential for website design, such as buttons, dropdowns, navigation bars, modals, and more.
  • Grouped by visual usability criteria: The components in Preline UI are grouped by visual usability criteria, making it easy for designers to find the components they need.
  • Styled on top of Tailwind CSS: All components in Preline UI are styled directly on top of the Tailwind CSS framework, allowing for easy customization and extension.
  • Open-source and MIT licensed: Preline UI is an open-source project and is licensed under the MIT license, giving developers the freedom to use it in their commercial and personal projects.

Installation:

To get started with Preline UI, follow these steps:

  1. Make sure you have a working Tailwind CSS project installed and Node and NPM installed on your machine.
  2. Install Preline UI via NPM using the following command:
npm install preline
  1. Include Preline UI as a plugin in the tailwind.config.js file by adding the following code:
// tailwind.config.js

module.exports = {
  // ...
  plugins: [
    require('preline')
  ],
}
  1. Include the JavaScript that powers the interactive elements near the end of your <body> tag:
<script src="path/to/preline.js"></script>

Summary:

Preline UI is a handy tool for designers and developers looking to quickly create responsive and visually appealing websites. With its wide range of prebuilt components and easy customization options, it simplifies the process of designing and implementing UI elements. By leveraging the power of the utility-first Tailwind CSS framework, Preline UI provides the flexibility to create unique and eye-catching design systems. Its open-source nature and the MIT license make it accessible for both commercial and personal projects. Overall, Preline UI is a valuable resource for anyone looking to streamline their website design process.