preline
htmlstreamofficial · htmlstreamofficial/preline
Cung cấp cho các AI agent một thư viện các UI component, khối và template Tailwind CSS mã nguồn mở, được xây dựng sẵn để phát triển UI web nhanh chóng.
Preline UI là một bộ mã nguồn mở gồm các thành phần giao diện người dùng được xây dựng sẵn dựa trên framework Tailwind CSS ưu tiên tiện ích.
Xem trước
Bạn có thể làm gì với nó
- Nhanh chóng tạo bố cục trang đích đáp ứng bằng cách sử dụng các khối Preline UI.
- Thêm các yếu tố UI tương tác như dropdown, modal hoặc carousel vào ứng dụng web.
- Triển khai một hệ thống thiết kế nhất quán trên các phần khác nhau của một trang web bằng các component Tailwind CSS.
Kiểm tra an toàn
Dùng được, nhưng nên đọc ghi chú trước.
- ●Không có giấy phép rõ ràng: hỏi tác giả trước khi dùng cho sản phẩm thương mại.
Quét tự động các file trong repo. Luôn xem lại code trước khi chạy.
Trích từ 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.
- 204 free Tailwind CSS blocks and sections
- 5 free Tailwind CSS templates
- 27 headless Tailwind CSS plugins
- Full documentation, Figma, themes, and agent skills
⚡ 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
tailwindcssimport:
@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](https://preline.co/docs/component |