preline

[![Hero Image](https://preline.co/hero-image-2.jpg)](https://preline.co) <a href="https://preline.co"><img src="https://preline.co/preline-logo.svg" alt="Preline UI logo" width="200" height="auto"></a> 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. [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) ## ✨ About Preline Preline helps teams build modern websites and web apps faster with reusable [Tailwind CSS components](https://preline.co/docs/), interactive [headless Tailwind CSS plugins](https://preline.co/plugins/), [Tailwind CSS templates](https://preline.co/templates/), and production-ready [Tailwind CSS examples](https://preline.co/blocks/). 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](https://preline.co/blocks/) - [5 free Tailwind CSS templates](https://preline.co/templates/) - [27 headless Tailwind CSS plugins](https://preline.co/plugins/) - [Full documentation](https://preline.co/docs/), [Figma](https://preline.co/figma/), [themes](https://preline.co/docs/themes.html), and [agent skills](https://preline.co/docs/agent-skills.html) ## ⚡ Getting Started Start with any working [Tailwind CSS](https://tailwindcss.com/) project and make sure [Node.js](https://nodejs.org/en/) and [npm](https://www.npmjs.com/) are installed. ### Install via npm 1. Install `preline`: ```bash npm i preline ``` 2. Import the Preline CSS variants file into your Tailwind CSS file after the `tailwindcss` import: ```css @import "tailwindcss"; /* Preline UI */ @source "./node_modules/preline/dist/*.js"; @import "./node_modules/preline/variants.css"; /* Preline Themes */ @import "./themes/theme.css"; ``` 3. Add the Preline JavaScript file near the end of your `<body>` tag: ```html <script src="./node_modules/preline/dist/preline.js"></script> ``` For setup details, framework integration, and configuration guides, visit the [Preline documentation](https://preline.co/docs/). ## 🤖 Agent Skills Preline UI includes [Agent Skills](https://preline.co/docs/agent-skills.html) 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: ```bash 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](https://preline.co/docs/accessibility.html). ## 🧩 Headless Tailwind CSS Plugins Explore [headless Tailwind CSS plugins](https://preline.co/plugins/) for accessible UI behavior, interactions, forms, navigation, overlays, and productivity workflows. | Category | Plugin Pages | | --- | --- | | Disclosure | [Accordion](https://preline.co/plugins/accordion.html), [Collapse](https://preline.co/plugins/collapse.html), [Tree View](https://preline.co/plugins/tree-view.html) | | Navigations | [Tabs](https://preline.co/plugins/tabs.html), [Scrollspy](https://preline.co/plugins/scrollspy.html), [Scroll Nav](https://preline.co/plugins/scroll-nav.html), [Stepper](https://preline.co/plugins/stepper.html) | | Overlays | [Dropdown](https://preline.co/plugins/dropdown.html), [Overlay](https://preline.co/plugins/overlay.html), [Tooltip](https://preline.co/plugins/tooltip.html) | | Forms | [Select](https://preline.co/plugins/advanced-select.html), [ComboBox](https://preline.co/plugins/combobox.html), [Datepicker](https://preline.co/plugins/advanced-datepicker.html), [Range Slider](https://preline.co/plugins/advanced-range-slider.html), [Input Number](https://preline.co/plugins/input-number.html), [File Upload](https://preline.co/plugins/file-upload.html), [Strong Password](https://preline.co/plugins/strong-password.html), [Toggle Password](https://preline.co/plugins/toggle-password.html), [Toggle Count](https://preline.co/plugins/toggle-count.html), [Copy Markup](https://preline.co/plugins/copy-markup.html), [PIN Input](https://preline.co/plugins/pin-input.html), [Textarea Auto Height](https://preline.co/plugins/textarea-autoheight.html) | | Miscellaneous | [DataTable](https://preline.co/plugins/datatables.html), [Carousel](https://preline.co/plugins/carousel.html), [Layout Splitter](https://preline.co/plugins/layout-splitter.html), [Remove Element](https://preline.co/plugins/remove-element.html), [Theme Switch](https://preline.co/plugins/theme-switch.html) | ## 🧱 Tailwind CSS Components Browse [Tailwind CSS component docs](https://preline.co/docs/) across layout, base UI, forms, navigation, overlays, tables, and advanced integrations. | Category | Component Pages | | --- | --- | | Layout & Content | [Container](https://preline.co/docs/components/container.html), [Columns](https://preline.co/docs/components/columns.html), [Grid](https://preline.co/docs/components/grid.html), [Layout Splitter](https://preline.co/docs/components/layout-splitter.html), [Typography](https://preline.co/docs/components/typography.html), [Images](https://preline.co/docs/components/images.html), [Links](https://preline.co/docs/components/links.html), [Dividers & HR](https://preline.co/docs/components/dividers.html), [KBD](https://preline.co/docs/components/kbd.html), [Custom Scrollbar](https://preline.co/docs/components/custom-scrollbar.html) | | Base Components | [Accordion](https://preline.co/docs/components/accordion.html), [Alerts](https://preline.co/docs/components/alerts.html), [Avatar](https://preline.co/docs/components/avatar.html), [Avatar Group](https://preline.co/docs/components/avatar-group.html), [Badge](https://preline.co/docs/components/badge.html), [Blockquote](https://preline.co/docs/components/blockquote.html), [Buttons](https://preline.co/docs/components/buttons.html), [Button Group](https://preline.co/docs/components/button-group.html), [Card](https://preline.co/docs/components/card.html), [Chat Bubbles](https://preline.co/docs/components/chat-bubbles.html), [Carousel](https://preline.co/docs/components/carousel.html), [Collapse](https://preline.co/docs/components/collapse.html), [Datepicker](https://preline.co/docs/components/datepicker.html), [Devices](https://preline.co/docs/components/devices.html), [Lists](https://preline.co/docs/components/lists.html), [List Group](https://preline.co/docs/components/list-group.html), [Legend Indicator](https://preline.co/docs/components/legend-indicator.html), [Progress](https://preline.co/docs/components/progress.html), [File Uploading Progress](https://preline.co/docs/components/file-uploading-progress-form.html), [Ratings](https://preline.co/docs/components/ratings.html), [Skeleton](https://preline.co/docs/components/skeleton.html), [Spinners](https://preline.co/docs/components/spinners.html), [Styled Icons](https://preline.co/docs/components/static-icons.html), [Toasts](https://preline.co/docs/components/toasts.html), [Timeline](https://preline.co/docs/components/timeline.html), [Tree View](https://preline.co/docs/components/tree-view.html) | | Navigations | [Navbar](https://preline.co/docs/components/navbar.html), [Mega Menu](https://preline.co/docs/components/mega-menu.html), [Navs](https://preline.co/docs/components/navs.html), [Tabs](https://preline.co/docs/components/tabs.html), [Sidebar](https://preline.co/docs/components/sidebar.html), [Scrollspy](https://preline.co/docs/components/scrollspy.html), [Breadcrumb](https://preline.co/docs/components/breadcrumb.html), [Pagination](https://preline.co/docs/components/pagination.html), [Stepper](https://preline.co/docs/components/stepper.html) | | Basic Forms | [Input](https://preline.co/docs/components/input.html), [Input Group](https://preline.co/docs/components/input-group.html), [Textarea](https://preline.co/docs/components/textarea.html), [File Input](https://preline.co/docs/components/file-input.html), [Checkbox](https://preline.co/docs/components/checkbox.html), [Radio](https://preline.co/docs/components/radio.html), [Switch](https://preline.co/docs/components/switch.html), [Select](https://preline.co/docs/components/select.html), [Range Slider](https://preline.co/docs/components/range-slider.html), [Color Picker](https://preline.co/docs/components/color-picker.html), [Time Picker](https://preline.co/docs/components/time-picker.html) | | Advanced Forms | [Advanced Select](https://preline.co/docs/components/advanced-select.html), [ComboBox](https://preline.co/docs/components/combobox.html), [SearchBox](https://preline.co/docs/components/searchbox.html), [Input Number](https://preline.co/docs/components/input-number.html), [Strong Password](https://preline.co/docs/components/strong-password.html), [Toggle Password](https://preline.co/docs/components/toggle-password.html), [Toggle Count](https://preline.co/docs/components/toggle-count.html), [Copy Markup](https://preline.co/docs/components/copy-markup.html), [PIN Input](https://preline.co/docs/components/pin-input.html) | | Overlays | [Dropdown](https://preline.co/docs/components/dropdown.html), [Context Menu](https://preline.co/docs/components/context-menu.html), [Modal](https://preline.co/docs/components/modal.html), [Offcanvas](https://preline.co/docs/components/offcanvas.html), [Popover](https://preline.co/docs/components/popover.html), [Tooltip](https://preline.co/docs/components/tooltip.html) | | Tables | [Tables](https://preline.co/docs/components/tables.html) | | Third-Party Plugins | [Advanced Range Slider](https://preline.co/docs/components/advanced-range-slider.html), [Advanced Datepicker](https://preline.co/docs/components/advanced-datepicker.html), [Charts](https://preline.co/docs/components/charts.html), [Clipboard](https://preline.co/docs/components/clipboard.html), [Confetti Animation](https://preline.co/docs/components/confetti.html), [Datamaps](https://preline.co/docs/components/datamaps.html), [Datatables](https://preline.co/docs/components/datatables.html), [Drag and Drop](https://preline.co/docs/components/drag-and-drop.html), [File Upload](https://preline.co/docs/components/file-upload.html), [Maps](https://preline.co/docs/components/maps.html), [Toast Notifications](https://preline.co/docs/components/toast-notifications.html), [WYSIWYG Editor](https://preline.co/docs/components/text-editor.html) | ## 🎨 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](https://preline.co/templates/websites/digital-agency/) | [AI Chat](https://preline.co/templates/ai/ai-chat-interface/) | [CMS](https://preline.co/templates/dashboards/cms-admin/) | [Coffee Shop](https://preline.co/templates/ecommerce/coffee-shop/) | [Personal](https://preline.co/templates/websites/personal-portfolio/) | ### Explore More - [Free Tailwind CSS Blocks and Sections](https://preline.co/blocks/) - [Free Tailwind CSS Templates](https://preline.co/templates/) ## 🚀 Preline Pro [Preline Pro](https://preline.co/pro/) extends the free library with premium UI for serious product teams and commercial apps. It includes [740 premium Tailwind CSS blocks and sections](https://preline.co/blocks/), [21 premium Tailwind CSS templates](https://preline.co/templates/), and 207 pages for admin dashboards, SaaS products, ecommerce, CMS, CRM, analytics, finance, chat, startup, and marketing use cases. - [Preline Pro overview](https://preline.co/pro/) - [Premium Tailwind CSS Blocks and Sections](https://preline.co/blocks/) - [Premium Tailwind CSS Templates](https://preline.co/templates/) ## 📚 Documentation and Resources - [Preline UI documentation](https://preline.co/docs/) - [Preline JavaScript](https://preline.co/docs/preline-javascript.html) - [Framework guides](https://preline.co/docs/frameworks.html) - [Accessibility](https://preline.co/docs/accessibility.html) - [Themes](https://preline.co/docs/themes.html) - [Resources](https://preline.co/docs/resources.html) - [Figma UI kit](https://preline.co/figma/) ## 🤝 Community For help, best practices, and product discussions, use [GitHub Discussions](https://github.com/htmlstreamofficial/preline/discussions). Follow Preline UI [on X (Twitter)](https://x.com/prelineUI) for the latest updates. ## 📄 License Preline UI is free for personal and commercial projects under the [MIT License](https://preline.co/docs/license.html) and the [Preline UI Fair Use License](https://preline.co/docs/license.html). Copyright 2026 by Preline Labs Ltd. The [Preline UI Figma](https://preline.co/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](https://htmlstream.com) 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)](https://x.com/prelineUI).