Product
Introducing Reports: An Extensible Reporting Framework for Socket Data
Explore exportable charts for vulnerabilities, dependencies, and usage with Reports, Socket’s new extensible reporting framework.
By André Staltz - Apr 21, 2026
Launch Week Day 1: Socket for Jira Is Now Available.Learn More →
preline
Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
Preline UI is an open-source set of prebuilt, accessible UI components based on the utility-first Tailwind CSS framework.
✨ 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.
- 220+ 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.
🎨 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 780+ premium Tailwind CSS blocks and sections, 21 premium Tailwind CSS templates, and over 300 pages for admin dashboards, SaaS products, ecommerce, CMS, CRM, analytics, finance, chat, startup, and marketing use cases.
📚 Documentation and Resources
- Preline UI documentation
- Preline JavaScript
- Framework guides
- Accessibility
- Themes
- Resources
- Figma UI kit
🤝 Community
For help, best practices, and product discussions, use GitHub Discussions.
Follow Preline on X and support the project on Product Hunt.
📄 License
Preline UI is free for personal and commercial projects under the MIT License and the Preline UI Fair Use License. Copyright 2026 by Preline Labs Ltd.
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 on Twitter or leave supportive review on ProductHunt.
FAQs
Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
The npm package preline receives a total of 51,854 weekly downloads. As such, preline popularity was classified as popular.
We found that preline demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 19 Mar 2026
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Product
Socket for Jira Is Now Available
Socket for Jira lets teams turn alerts into Jira tickets with manual creation, automated ticketing rules, and two-way sync.
By Jeppe Hasseriis - Apr 20, 2026
Company News
Socket Named Top Sales Organization by RepVue
Socket won two 2026 Reppy Awards from RepVue, ranking in the top 5% of all sales orgs. AE Alexandra Lister shares what it's like to grow a sales career here.
By Sarah Gooding - Apr 17, 2026