preline

v4.1.3

Published

6 days ago

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.

0High
0Medium
0Low

preline html css javascript typescript webpack agent skills tailwind tailwind css tailwind ui tailwind library tailwind examples tailwind templates tailwind plugins tailwind components tailwind components library tailwind elements tailwind sections tailwind blocks tailwind colors tailwind css react tailwind css next tailwind css nextjs tailwind css vue tailwind css nuxtjs tailwind css angular tailwind css astro tailwind css solidjs tailwind css qwik tailwind css svelte tailwind css remix tailwind css laravel tailwind css vite tailwind css hugo tailwind css adonis tailwind css adonisjs tailwind css livewire tailwind css symfony tailwind css rails tailwind css phoenix tailwind css phoenix liveview tailwind css ember tailwind css flask tailwind css django tailwind css express tailwind css blazor tailwind css aspnet tailwind css asp.net core theme generator preline theme generator

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.

⚡ 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 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

🤝 Community

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

Follow Preline on X and support the project on Product Hunt.

📄 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 on Twitter or leave supportive review on ProductHunt.