# Preline UI — card for AI agents

Open-source Tailwind CSS component set (npm package preline) with free components and blocks; a paid Preline Pro adds premium blocks and templates.

Category: UI kits and website templates · maker Preline Labs Ltd · checked 2026-10-21 · style: minimal, corporate, flat

## Price
- Price: Free tier
- Free tier: Preline UI components are free for personal and commercial projects; Pro is paid.
- Usage price: Preline Pro: EUR 221 one-time, one developer, unlimited projects
- Pricing page: https://preline.co/pro/

## License
MIT plus Preline UI Fair Use License (dual) — https://preline.co/docs/license.html

- commercial: **conditions** (Commercial use with conditions)
  > Preline UI is free for both personal and commercial projects
  (https://preline.co/docs/license.html)
- attribution: **varies** (Credit depends on the item)
  > Must include clear attribution with a link to the original repository.
  (https://preline.co/docs/license.html)
- in app: **conditions** (Ship inside your app with conditions)
  > The Software shall not be used to create any product or service that directly competes with Preline UI.
  (https://preline.co/docs/license.html)

## Rules to follow
- Do not use it to build a product or service that directly competes with Preline UI.
- Derivative works and redistributions need attribution with a link to the original repository and both licences kept.
- Pro components are a separate paid licence: no redistribution, no use in open-source projects, themes, UI kits or generators.

## How an agent gets files
- npm i preline, import the Preline variants file after tailwindcss, add the preline JS before </body>; free blocks are copied from preline.co. Agent skills: npx skills add htmlstreamofficial/preline. (sign-in: none)
- Formats: html, css
- Not allowed: Fair Use License: no directly competing product
- Not allowed: Pro: no redistribution, no open-source projects

## Tailwind CSS (official example, https://preline.co/docs/index.html)

```
npm i preline

/* main.css */
@import "tailwindcss";
@source "./node_modules/preline/dist/*.js";
@import "./node_modules/preline/variants.css";
```

## How to connect
- Official MCP server
- npm: `npm install preline`
- Repository: https://github.com/htmlstreamofficial/preline
- Website: https://preline.co

## Notes
A Preline MCP is mentioned on the Pro page (free until 2027-01-01, subscription afterwards).

## Numbers (AgentGid data)
- Gid Score: 31.8
- GitHub stars: 6,501
- Downloads last week: 37,999
- Used in 1 public projects set up for AI coding agents

## Lines to paste into your prompt or AGENTS.md

```
- Preline UI (UI kits and website templates). Open-source Tailwind CSS component set (npm package preline) with free components and blocks; a paid Preline Pro adds premium blocks and templates. Price: free tier; commercial use with conditions; credit depends on the item; ship inside your app with conditions. Style: minimal, corporate, flat.
  Connect: npm preline.
  Get files: npm i preline, import the Preline variants file after tailwindcss, add the preline JS before </body>; free blocks are copied from preline.co. Agent skills: npx skills add htmlstreamofficial/preline (html, css).
  Not allowed: Fair Use License: no directly competing product
  Not allowed: Pro: no redistribution, no open-source projects
  Rule: Do not use it to build a product or service that directly competes with Preline UI.
  Rule: Derivative works and redistributions need attribution with a link to the original repository and both licences kept.
  Rule: Pro components are a separate paid licence: no redistribution, no use in open-source projects, themes, UI kits or generators.
  License: https://preline.co/docs/license.html (checked 2026-10-21; details: https://agentgid.com/assets/preline-ui/)
```

Not verified: Whether attribution applies to plain use (not derivative works) of the free components is not clear; Pro licence text itself was not read, only the pricing page summary.

## Links
- AgentGid page: https://agentgid.com/assets/preline-ui/
- Is it free for commercial use? https://agentgid.com/assets/preline-ui/commercial-use/
- Source: https://preline.co/docs/license.html
- Source: https://github.com/htmlstreamofficial/preline
- Source: https://preline.co/pro/

---
AgentGid's catalog is curated: every entry was checked against the maker's official pages (registry, repository, license and pricing pages) on the date shown; a license value shows the quote it stands on wherever AgentGid has one. Usage numbers come from AgentGid's own scan of public repositories set up for AI coding agents. Claims by makers are reported, not tested by AgentGid.