Preline UI - Open Source Tailwind CSS component library
Tags: tailwindcss, css, webdev, opensource
Published: 2022-06-08 12:48:29

## What is TailwindCSS?
A utility-first CSS framework packed with classes like `flex`, `pt-4`, `text-center` and `rotate-90` that can be composed to build any design, directly in your markup.

## What is Preline UI?

Preline UI is an open-source set of prebuilt UI components based on the utility-first [Tailwind CSS](https://tailwindcss.com/) 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).

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.

It is a great option for new and existing projects.

... and it’s completely **free!** 🤯

## Features

Let's see the most exciting features with a few examples.

Plugins - We've developed a handful of completely unstyled, fully accessible UI plugins for popular features that for one reason or another don't belong in core. Available plugins (more plugins coming soon):

- Accordion
- Collapse
- Dropdown
- Mega Menu
- Modal
- Offcanvas
- Remove Element
- Tabs
- Popover
- Tooltip

**250+ Components** - We have put a lot of thought into designing all of the components to look coherent and work well together in various grid layouts. It’s an extraordinarily rich and complete UI collection for a modern web application. Nevertheless, if some components should look different according to your perspective, you can edit and customize them easily. Learn more

**Dark Mode** - With modern operating systems all having light and dark mode, to make this as easy as possible, all Preline UI components include a dark variant that lets you style your site differently when dark mode is enabled. [Learn more](https://preline.co/docs/dark-mode.html)

![Dark Mode example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s0k4uprg5ch04kgnkacy.jpg)

**Code snippets** - Each component comes with copy to clipboard feature. Just click on the “Copy” button and copy the code to your file. The hard work is done for you and makes the process easier.

![Code Snippets example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k0pq23z3buccubdblnmf.jpg)

## Documentation

We've done our best to make the documentation as thoughtful and thoroughly organized as possible with easy to navigate through different sections to help you not to struggle that much as you build different sites.

For full documentation of the Preline options, visit [preline.com](https://preline.co/docs/index.html).

## License

Preline UI is Open Source project and licensed under MIT for better Web.

Learn more [here](https://preline.co/docs/license.html).

## Preline with other Frameworks

### 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` via npm

`npm i preline-ui`

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

`npm i preline-ui`

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

`<script src="./docs/assets/vendor/preline-ui/preline-ui.bundle.js"></script>`

## Upcoming features

We are working hard to provide even more time saving features for both designers and developers, here is a list of upcoming features:

- Starter Pages & Examples
- Figma Design System
- Tailwind Plugins
- More Components

Please feel free to share in the comments section below what features you would like to see in future updates.

## Conclusion

Preline offers a wide range of options for every component, making your life easier by providing you with high quality design solutions. This diversity is very powerful and useful when dealing with complex UIs.

The best thing is, it doesn't limit you! 🔥

We believe that the idea of utility first approach is the way forward. We’re just getting started and the future holds even more exciting features. Let’s build together! 🤘

Don't forget to share the post with your friends and other code newbies learning CSS frameworks.

For more up-to-date web development content, follow us on [Twitter](https://twitter.com/htmlstream), and [Htmlstream in Dev.to](https://dev.to/htmlstreamofficial) and [me on Dev.to](https://dev.to/zafar)! 

Thanks for reading! 😎