Preline UI — Tailwind CSS Component Collection

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