{
"markdown": "[](https://preline.co)\n\n![\"Preline](\"https://preline.co/preline-logo.svg\")
\n\nPreline 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.\n\n[](https://opensource.org/licenses/MIT)\n\n## β¨ About Preline\n\nPreline 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.\n\n- [204 free Tailwind CSS blocks and sections](https://preline.co/blocks/)\n- [5 free Tailwind CSS templates](https://preline.co/templates/)\n- [27 headless Tailwind CSS plugins](https://preline.co/plugins/)\n- [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)\n\n## β‘ Getting Started\n\nStart 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.\n\n### Install via npm\n\n1. Install `preline`:\n\n```bash\nnpm i preline\n```\n\n2. Import the Preline CSS variants file into your Tailwind CSS file after the `tailwindcss` import:\n\n```css\n@import \"tailwindcss\";\n\n/* Preline UI */\n@source \"./node_modules/preline/dist/*.js\";\n@import \"./node_modules/preline/variants.css\";\n\n/* Preline Themes */\n@import \"./themes/theme.css\";\n```\n\n3. Add the Preline JavaScript file near the end of your `` tag:\n\n```html\n\n```\n\nFor setup details, framework integration, and configuration guides, visit the [Preline documentation](https://preline.co/docs/).\n\n## π€ Agent Skills\n\nPreline 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.\n\nInstall via CLI:\n\n```bash\nnpx skills add htmlstreamofficial/preline\n```\n\n## βΏ Accessibility\n\nPreline 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).\n\n## 𧩠Headless Tailwind CSS Plugins\n\nExplore [headless Tailwind CSS plugins](https://preline.co/plugins/) for accessible UI behavior, interactions, forms, navigation, overlays, and productivity workflows.\n\n| Category | Plugin Pages |\n| --- | --- |\n| Disclosure | [Accordion](https://preline.co/plugins/accordion.html), [Collapse](https://preline.co/plugins/collapse.html), [Tree View](https://preline.co/plugins/tree-view.html) |\n| 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) |\n| Overlays | [Dropdown](https://preline.co/plugins/dropdown.html), [Overlay](https://preline.co/plugins/overlay.html), [Tooltip](https://preline.co/plugins/tooltip.html) |\n| 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) |\n| 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) |\n\n## 𧱠Tailwind CSS Components\n\nBrowse [Tailwind CSS component docs](https://preline.co/docs/) across layout, base UI, forms, navigation, overlays, tables, and advanced integrations.\n\n| Category | Component Pages |\n| --- | --- |\n| 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) |\n| 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) |\n| 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) |\n| 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) |\n| 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) |\n| 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) |\n| Tables | [Tables](https://preline.co/docs/components/tables.html) |\n| 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) |\n\n## π¨ Templates and Examples\n\nExplore free and premium layouts for landing pages, dashboards, SaaS apps, ecommerce stores, CMS products, portfolios, and more.\n\n### Free Tailwind CSS Templates\n\n| Template | Template | Template | Template | Template |\n| --- | --- | --- | --- | --- |\n| [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/) |\n\n### Explore More\n\n- [Free Tailwind CSS Blocks and Sections](https://preline.co/blocks/)\n- [Free Tailwind CSS Templates](https://preline.co/templates/)\n\n## π Preline Pro\n\n[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.\n\n- [Preline Pro overview](https://preline.co/pro/)\n- [Premium Tailwind CSS Blocks and Sections](https://preline.co/blocks/)\n- [Premium Tailwind CSS Templates](https://preline.co/templates/)\n\n## π Documentation and Resources\n\n- [Preline UI documentation](https://preline.co/docs/)\n- [Preline JavaScript](https://preline.co/docs/preline-javascript.html)\n- [Framework guides](https://preline.co/docs/frameworks.html)\n- [Accessibility](https://preline.co/docs/accessibility.html)\n- [Themes](https://preline.co/docs/themes.html)\n- [Resources](https://preline.co/docs/resources.html)\n- [Figma UI kit](https://preline.co/figma/)\n\n## π€ Community\n\nFor help, best practices, and product discussions, use [GitHub Discussions](https://github.com/htmlstreamofficial/preline/discussions).\n\nFollow Preline UI [on X (Twitter)](https://x.com/prelineUI) for the latest updates.\n\n## π License\n\nPreline 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.\n\nThe [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.\n\n## A Product of Htmlstream\n\nPreline 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.\n\nShare your thoughts about Preline UI on [X (Twitter)](https://x.com/prelineUI).\n",
"bytes": 13533,
"sha": "217ef974980a9bebd7451f45794c2f85f9df522a043c2f3d60bae1012af95ca6",
"repo_slug": "htmlstreamofficial/preline",
"fonte": "repo",
"truncated": false,
"api": "https://agentalog.com/api/listings/skl_htmlstreamofficial_preline_preline_theme_fc97a320/readme"
}