Frameworks & SDKs#Claude Code #Cursor #Gemini CLI #Any agent#Coding #Frontend #Design

Tailwind UI components, plugins, and agent skills

Preline UI packages reusable Tailwind CSS components, interactive headless plugins, and ready-made templates for building websites and web apps. The library is delivered as compiled JavaScript and TypeScript declarations in `dist/`, with theme CSS in `css/themes/` and setup guidance in the README.

6,415 stars•413 forks•TypeScript•Updated 17d ago

Who it's for

Builders who want Tailwind UI components they can drop into websites, web apps, and agent-led workflows.

What it delivers

You can build polished interfaces with reusable Tailwind components instead of assembling every pattern from scratch.

What it does

Reusable Tailwind components

Includes prebuilt UI patterns for layout, forms, navigation, overlays, tables, and more.

Headless plugins

Provides interactive behavior for components such as accordion, dropdown, tabs, select, datepicker, and carousel.

Agent skills

Ships skills for Cursor, Claude Code, and Gemini CLI to support theme generation and UI workflows.

Theme support

Includes theme CSS files and documentation for applying visual variants.

Accessibility support

Adds keyboard-friendly interactions, focus handling, and assistive-technology support across components.

Templates and blocks

Offers starter templates and example blocks for pages like landing pages, dashboards, and ecommerce sites.

How to get it

1Install preline
```
npm i preline
```

README

Preline UI is an open-source Tailwind CSS UI component library for building modern websites and apps. It includes UI blocks, templates, plugins, a Figma design system, and more.

✨ About Preline

Preline helps teams build modern websites and web apps faster with reusable Tailwind CSS components, interactive headless Tailwind CSS plugins, Tailwind CSS templates, and production-ready Tailwind CSS examples. It is designed for developers who want flexible markup, scalable design systems, and polished UI patterns without rebuilding everything from scratch.

⚡ Getting Started

Start with any working Tailwind CSS project and make sure Node.js and npm are installed.

Install via npm

Install preline:

npm i preline

Import the Preline CSS variants file into your Tailwind CSS file after the tailwindcss import:

@import "tailwindcss";

/* Preline UI */
@source "./node_modules/preline/dist/*.js";
@import "./node_modules/preline/variants.css";

/* Preline Themes */
@import "./themes/theme.css";

Add the Preline JavaScript file near the end of your <body> tag:

<script src="./node_modules/preline/dist/preline.js"></script>

For setup details, framework integration, and configuration guides, visit the Preline documentation.

🤖 Agent Skills

Preline UI includes Agent Skills for agentic coding tools such as Cursor, Claude Code, and Gemini CLI, making it easier to automate theme generation and UI workflows.

Install via CLI:

npx skills add htmlstreamofficial/preline

♿ Accessibility

Preline UI includes enterprise-grade accessibility built into its components, helping teams create more inclusive interfaces with accessible Tailwind CSS components, keyboard-friendly interactions, proper focus management, and stronger support for assistive technologies. Learn more in the dedicated Accessibility documentation.

🧩 Headless Tailwind CSS Plugins

Explore headless Tailwind CSS plugins for accessible UI behavior, interactions, forms, navigation, overlays, and productivity workflows.

Category	Plugin Pages
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
Miscellaneous	DataTable, Carousel, Layout Splitter, Remove Element, Theme Switch

🧱 Tailwind CSS Components

Browse Tailwind CSS component docs across layout, base UI, forms, navigation, overlays, tables, and advanced integrations.

Category	Component Pages
Layout & Content	Container, Columns, Grid, Layout Splitter, Typography, Images, Links, Dividers & HR, KBD, Custom Scrollbar
Base Components	Accordion, Alerts, Avatar, Avatar Group, Badge, Blockquote, Buttons, Button Group, Card, Chat Bubbles, Carousel, Collapse, Datepicker, Devices, Lists, List Group, Legend Indicator, Progress, File Uploading Progress, Ratings, Skeleton, Spinners, Styled Icons, Toasts, Timeline, Tree View
Navigations	Navbar, Mega Menu, Navs, Tabs, Sidebar, Scrollspy, Breadcrumb, Pagination, Stepper
Basic Forms	Input, Input Group, Textarea, File Input, Checkbox, Radio, Switch, Select, Range Slider, Color Picker, Time Picker
Advanced Forms	Advanced Select, ComboBox, SearchBox, Input Number, Strong Password, Toggle Password, Toggle Count, Copy Markup, PIN Input
Overlays	Dropdown, Context Menu, Modal, Offcanvas, Popover, Tooltip
Tables	Tables
Third-Party Plugins	Advanced Range Slider, Advanced Datepicker, Charts, Clipboard, Confetti Animation, Datamaps, Datatables, Drag and Drop, File Upload, Maps, Toast Notifications, WYSIWYG Editor

🎨 Templates and Examples

Explore free and premium layouts for landing pages, dashboards, SaaS apps, ecommerce stores, CMS products, portfolios, and more.

Free Tailwind CSS Templates

Template	Template	Template	Template	Template
Agency	AI Chat	CMS	Coffee Shop	Personal

Explore More

🚀 Preline Pro

Preline Pro extends the free library with premium UI for serious product teams and commercial apps. It includes 740 premium Tailwind CSS blocks and sections, 21 premium Tailwind CSS templates, and 207 pages for admin dashboards, SaaS products, ecommerce, CMS, CRM, analytics, finance, chat, startup, and marketing use cases.

📚 Documentation and Resources

🤝 Community

For help, best practices, and product discussions, use GitHub Discussions.

Follow Preline UI on X (Twitter) for the latest updates.

📄 License

The Preline UI Figma resources are also available for personal and commercial use. All brand icons are trademarks of their respective owners, and their use does not imply endorsement.

A Product of Htmlstream

Preline UI is built by the Htmlstream team, crafting UI components and templates since 2013—helping teams ship faster with scalable, flexible design systems for real-world products.

Share your thoughts about Preline UI on X (Twitter).

Files in the repo

Repository payload•26 top-level entries

.github— GitHub workflows and templates
css— 1 item
dist— 156 items
scripts— Helper scripts
skills— The skills, one folder each
src— Source code
templates— Templates to copy
.gitignore
dts-config.js
global.d.ts
index.d.ts
index.js
LICENSE— License
package-lock.json
package.json— Node package: install with npm
preline.d.ts
preline.js
prettier.config.js
README.md— The README
theme.css
tsconfig.dts.json
tsconfig.json
tsconfig.mjs.json
variants.css
webpack.config.js
webpack.config.mjs.js

Discussion (0)

Ask about usage, or say what you built with it

No comments yet. Be the first to say what this is good for.

More frameworks & sdks

heygen-com/hyperframesFrameworks & SDKs

Write HTML. Render video. Built for agents.

49k

HKUDS/nanobotFrameworks & SDKs

Ultra-lightweight, open-source, self-hosted personal AI agent framework in Python with WebUI, tools, memory, MCP, multi-agent workflows, automation, and chat apps

48k

microsoft/

SkillOpt

microsoft/SkillOptFrameworks & SDKs

SkillOpt is a text-space optimizer that trains reusable natural-language skills for frozen LLM agents through trajectory-driven edits, validation-gated updates, and deployable best_skill.md artifacts.

17k

omnigent-ai/omnigentFrameworks & SDKs

Omnigent is an open-source AI agent framework and meta-harness: orchestrate Claude Code, Codex, Cursor, Pi, and custom agents — swap harnesses without rewriting, enforce policies and sandboxing, and collaborate in real time from any device.

9.8k

kyegomez/

OpenMythos

kyegomez/OpenMythosFrameworks & SDKs

A theoretical reconstruction of the Claude Mythos architecture, built from first principles using the available research literature.

15k

D4Vinci/ScraplingFrameworks & SDKs

🕷️ An adaptive Web Scraping framework that handles everything from a single request to a full-scale crawl!

80k