# Preline UI: Tailwind CSS components with headless plugins > Preline UI ships 204 free blocks, 27 headless plugins and agent skills on top of Tailwind CSS. Here is how the install works, where the plugin layer ends, and when a component library is the wrong choice. **htmlstreamofficial/preline** — Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework. - Repository: https://github.com/htmlstreamofficial/preline - Website: https://preline.co - Stars: 6,459 · Forks: 414 - Language: TypeScript - License: NOASSERTION - Published: 2026-09-22 · Updated: 2026-09-22 · Language: en - Canonical page: https://hysenlabs.com/projects/htmlstreamofficial-preline ## What Preline UI solves, and who is actually buying it Tailwind CSS gives you utility classes and nothing else. Every dropdown, tab set and datepicker that needs JavaScript behaviour plus accessible markup is your problem. Preline UI exists to fill that gap: prebuilt components, headless plugins that supply the interaction layer, and blocks and templates you can paste into a page. The README describes the target user as developers who want flexible markup and scalable design systems without rebuilding UI patterns from scratch. The audience is narrower than "anyone building a website". If you write React, Vue or Angular components and expect a library that exports a Tabs component with props, Preline UI is not that. It is markup first. You copy HTML, add Tailwind classes, then let a plugin attach behaviour to the elements you wrote. That is a real architectural choice, and it decides whether the library fits your project before you install anything. The free tier is the part that matters for evaluation. The README lists 204 free blocks and sections, 5 free templates and 27 headless plugins, with links to preline.co for each. Paid offerings appear in the related search data as preline plus and preline pro, but the README does not describe their contents, so treat the free counts as the boundary you can verify from the repository itself. ## How the plugin layer works: markup plus a data attribute The mechanism is a set of headless plugins. Headless here means the plugin supplies behaviour and accessibility wiring, not visual styling. Styling comes from Tailwind classes you write on the same elements. The README groups the plugins by category: disclosure (Accordion, Collapse, Tree View), navigations (Tabs, Scrollspy, Scroll Nav, Stepper), overlays (Dropdown, Overlay, Tooltip), forms (Select, ComboBox, Datepicker, Range Slider, Input Number, File Upload, Strong Password, Toggle Password, Toggle Count, Copy Markup, PIN Input, Textarea Auto Height) and miscellaneous (DataTable, Carousel, Layout Splitter, Remove Element, Theme Switch). The package layout supports both automatic and manual wiring. package.json exports a root entry point plus a "./non-auto" subpath, and declares sideEffects for ./dist/index.js, ./dist/index.mjs and ./src/auto/index.ts. The naming implies that the default import auto-initialises plugins found in the document, while non-auto requires you to initialise them yourself. Individual plugins are reachable through "./plugins/*", and helpers through "./helpers/*" with a helper-clipboard file listed among the side effects. The README does not spell out the non-auto initialisation call, so check the plugin documentation pages before assuming an API shape. That design has a consequence worth stating plainly. Because behaviour binds to markup rather than to a component tree, server-rendered HTML and statically generated pages work naturally. The same property makes the library awkward inside frameworks that re-render the DOM, since a plugin instance attached to an element can outlive the element it was attached to. The README points to framework guides, and v4.2.0 is titled "New components, 10+ framework guides, and quality improvements", which suggests those guides are the place to look for the framework-specific wiring. ## Installing Preline UI in a Tailwind project The README assumes a working Tailwind CSS project with Node.js and npm installed. Install the package from npm: ```bash npm i preline ``` Then import the Preline CSS variants file into your Tailwind CSS file, after the tailwindcss import. The README gives this exact block, where @source points Tailwind at the compiled plugin JavaScript so the classes used inside plugins are not purged: ```css @import "tailwindcss"; /* Preline UI */ @source "./node_modules/preline/dist/*.js"; @import "./node_modules/preline/variants.css"; /* Preline Themes */ @import "./themes/theme.css"; ``` Finally, load the Preline JavaScript near the end of the body tag: ```html ``` After those three steps, components copied from the documentation should render with their styling and respond to interaction, because the script initialises the plugins present on the page. If you only need one plugin and want to keep the bundle small, the exports map exposes "./plugins/*" so you can import that plugin alone instead of the full preline.js. Agent skills are installed separately. The README gives a single command for tools such as Cursor, Claude Code and Gemini CLI: ```bash npx skills add htmlstreamofficial/preline ``` package.json also declares a binary named preline-theme-generator pointing at ./skills/theme-generator/scripts/generate-theme.js, which is the theme generation path mentioned in the v5.0.0 release title. ## Where Preline UI stops being the right tool The most concrete limitation is the licence metadata mismatch. The README carries an MIT badge, but the repository's LICENSE file is the authoritative one and GitHub reports the licence as NOASSERTION, meaning it could not classify the file. That is not proof of a non-MIT licence, and it is not a reason to avoid the project, but it is a reason to open LICENSE yourself before you ship, particularly if you need to redistribute the code or vendor it into a product. Second, the library is not a design system in the component-API sense. There is no exported Tabs component with typed props. The plugins are headless, so accessibility wiring and behaviour arrive, but the visual result depends entirely on the Tailwind classes you place on the markup. Teams expecting a themed, opinionated component set will spend time styling rather than assembling. The README's accessibility section claims keyboard-friendly interactions and focus management built in; it does not enumerate which WAI-ARIA patterns each plugin implements, so verify the specific widgets your product depends on. Third, the documentation is the product surface. There is no API reference in the README for the non-auto entry point, for plugin constructor options, or for teardown when a framework removes an element. The README links to preline.co/docs for setup, framework integration and configuration, which is where those answers live if they exist. If your project needs a documented programmatic API with versioned guarantees, that gap matters more than the component count. ## Preline UI against daisyUI, Flowbite and shadcn The search data around this project is full of comparisons, so it is worth being precise about the difference in approach rather than the difference in features. Preline UI is Tailwind-first markup plus headless plugins: you own the HTML, the plugin owns the behaviour. daisyUI takes the opposite route, adding semantic class names such as btn and card on top of Tailwind so your markup is shorter but the visual decisions are made for you. If you want to write less markup and accept daisyUI's component aesthetics, Preline UI's plugin model is extra machinery you do not need. Flowbite sits closer to Preline UI. Both ship Tailwind components and both have interactive elements, so the practical difference is in how behaviour is delivered and how much of the library is free. The README's free counts (204 blocks, 5 templates, 27 plugins) are the numbers to compare against whatever Flowbite publishes, and the plugin pages linked from the README are where you check whether a specific widget exists before committing. shadcn is a different category. It distributes component source that you copy into a React project and own outright, which is why the related searches pair it with Preline UI even though the two do not compete directly. If your application is React and you want components as code you can edit at the component level, shadcn's model fits better. Preline UI's model fits when the page is HTML, or when the framework is a thin layer over HTML and you want the interaction layer decoupled from it. ## Maintenance, upgrades and the cost of v5 The repository is not archived and the last push was on 2026-08-31, which is the same timestamp as the v5.0.0 release. The release history shows v4.2.0 on 2026-05-10 and v4.1.3 on 2026-03-19, so the cadence over the visible window is a minor release roughly every two months and a major release in August 2026. That is a real upgrade cost for anyone pinning versions: v5.0.0 is titled "Preline MCP, AI Prompts, Animated Icons and more", which indicates the major version moved the package's scope rather than only its components. Two upgrade hazards are visible from the repository layout. The package.json exports map is the contract your imports depend on, including the "./non-auto" subpath, the "./plugins/*" and "./helpers/*" patterns, and CSS entry points such as "./variants.css", "./theme.css", "./datepicker-styles-utility.css" and "./datepicker-styles.css". Any reshuffle of those keys breaks imports at build time. The @source directive in your Tailwind CSS file points at ./node_modules/preline/dist/*.js, so if a future release changes what is emitted into dist, class detection can silently stop covering plugin internals and components can lose styling without an error. On licence, the README badge says MIT and the repository ships a LICENSE file, while GitHub reports NOASSERTION. MIT is permissive and permits commercial use, but this article is not legal advice and the badge is not the licence text. Read LICENSE at the repository root and confirm it matches what you intend to do with the code, especially if you are vendoring preline.js into a distributed artifact. ## Conclusion Preline UI suits teams already committed to Tailwind CSS who want markup they can edit directly and plugin behaviour they can attach to their own elements. It is the wrong pick if you want a JavaScript framework component API, since the plugins are headless and the docs describe markup plus script tags, not a React or Angular component tree. Before adopting, verify the LICENSE file at the repository root, since GitHub reports the licence as NOASSERTION while the README badge says MIT, and check that the components you need are in the free set rather than behind preline pro. ## FAQ ### What is Preline UI? It is an open-source Tailwind CSS UI component library for building websites and apps, including UI blocks, templates, plugins and a Figma design system. The README lists 204 free blocks, 5 free templates and 27 headless plugins. ### How do I install Preline UI? Run npm i preline in a working Tailwind CSS project, import the variants.css file into your Tailwind CSS file after the tailwindcss import, and add the preline.js script near the end of the body tag. The README points to preline.co/docs for framework integration and configuration details. ### Is Preline UI free? The README lists 204 free blocks and sections, 5 free templates and 27 headless plugins, and carries an MIT licence badge. The repository's LICENSE file is the authoritative text, and GitHub reports the licence as NOASSERTION rather than MIT. ### How do I use Preline UI components? You copy component markup from the documentation, style it with Tailwind classes, and let the Preline JavaScript initialise the plugins present on the page. Individual plugins are also importable through the "./plugins/*" export if you do not want the full preline.js. ## Sources - [htmlstreamofficial/preline on GitHub](https://github.com/htmlstreamofficial/preline) - [Issues](https://github.com/htmlstreamofficial/preline/issues) - [Project website](https://preline.co) - [README](https://github.com/htmlstreamofficial/preline/blob/main/README.md) - [Releases](https://github.com/htmlstreamofficial/preline/releases) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/htmlstreamofficial-preline