# Preline UI — Tailwind CSS Component Collection

> An open-source set of prebuilt UI components and templates based on Tailwind CSS, offering interactive elements powered by a lightweight JavaScript plugin.

## Install

Save as a script file and run:

# Preline UI — Tailwind CSS Component Collection

## Quick Use
```bash
npm install preline
# Add to tailwind.config.js plugins:
# require('preline/plugin')
# Add the JS in your entry:
# import 'preline/preline';
```

## Introduction
Preline UI is a collection of prebuilt UI components styled with Tailwind CSS. It provides ready-to-use HTML blocks for common interface patterns like modals, dropdowns, tabs, accordions, and carousels, with interactivity handled by a small JavaScript plugin that reads data attributes.

## What Preline UI Does
- Supplies 300+ component examples covering navigation, forms, overlays, and content sections
- Provides a Tailwind CSS plugin that extends the utility class set with component-specific variants
- Handles interactivity (show/hide, toggle, collapse) via a vanilla JS plugin using data attributes
- Works with any HTML-based framework including plain HTML, React, Vue, and Angular
- Offers responsive and dark-mode-ready components by default

## Architecture Overview
Preline UI is split into two parts: a Tailwind CSS plugin that adds custom variants and utilities, and a JavaScript runtime that attaches event listeners to elements with `data-hs-*` attributes. The JS plugin scans the DOM on load and initializes interactive behaviors like collapse, dropdown, and modal without requiring a framework. Components are plain HTML with Tailwind classes, making them easy to copy into any project.

## Self-Hosting & Configuration
- Install via npm and register the Tailwind plugin in your config
- Import the JavaScript plugin in your app entry point or load via CDN
- Copy component HTML from the documentation into your templates
- Customize styling by adjusting Tailwind configuration or overriding classes
- For React or Vue, initialize the Preline plugin after component mount

## Key Features
- Large library of 300+ responsive component examples with dark mode
- Framework-agnostic design using plain HTML and Tailwind classes
- Lightweight JS plugin with no external dependencies
- Tailwind plugin integration for extended utility classes
- Accessible markup with ARIA attributes on interactive components

## Comparison with Similar Tools
- **DaisyUI** — Tailwind component classes you add to elements; Preline provides full HTML templates
- **Flowbite** — similar Tailwind component library; Preline offers a larger template collection
- **Bootstrap** — own class system; Preline uses Tailwind utilities exclusively
- **shadcn/ui** — React-specific copy-paste components; Preline is framework-agnostic HTML
- **Headless UI** — unstyled accessible primitives; Preline ships fully styled templates

## FAQ
**Q: Does Preline UI work with React or Vue?**
A: Yes. Copy the HTML structure into your components and initialize the Preline JS plugin after the component mounts.

**Q: Is the JavaScript plugin required?**
A: Only for interactive components like dropdowns, modals, and tabs. Static components work with CSS alone.

**Q: Can I use Preline with Tailwind CSS v4?**
A: Check the documentation for the latest compatibility. The plugin is actively updated to track Tailwind releases.

**Q: Is Preline UI free?**
A: The core component library is open source. Premium templates and page examples are available separately.

## Sources
- https://github.com/htmlstreamofficial/preline
- https://preline.co

---
Source: https://tokrepo.com/en/workflows/asset-163ec4c8
Author: Script Depot