{"id":13456894,"url":"https://github.com/htmlstreamofficial/preline","last_synced_at":"2026-04-02T11:35:21.353Z","repository":{"id":37243864,"uuid":"492526669","full_name":"htmlstreamofficial/preline","owner":"htmlstreamofficial","description":"Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.","archived":false,"fork":false,"pushed_at":"2025-04-26T08:00:50.000Z","size":2271,"stargazers_count":5477,"open_issues_count":25,"forks_count":351,"subscribers_count":36,"default_branch":"main","last_synced_at":"2025-05-01T10:39:59.084Z","etag":null,"topics":["css","html","javascript","tailwindcss","tailwindcss-plugin","typescript","ui-components"],"latest_commit_sha":null,"homepage":"https://preline.co","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/htmlstreamofficial.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-15T15:29:39.000Z","updated_at":"2025-05-01T04:05:13.000Z","dependencies_parsed_at":"2023-11-07T03:04:59.225Z","dependency_job_id":"c2f66493-1744-49be-9280-53c09db691bb","html_url":"https://github.com/htmlstreamofficial/preline","commit_stats":{"total_commits":65,"total_committers":17,"mean_commits":3.823529411764706,"dds":0.7846153846153846,"last_synced_commit":"3f8c2fcbc24b2572350fa88499e9c917da2ea470"},"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/htmlstreamofficial%2Fpreline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/htmlstreamofficial%2Fpreline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/htmlstreamofficial%2Fpreline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/htmlstreamofficial%2Fpreline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/htmlstreamofficial","download_url":"https://codeload.github.com/htmlstreamofficial/preline/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252590521,"owners_count":21772934,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","html","javascript","tailwindcss","tailwindcss-plugin","typescript","ui-components"],"created_at":"2024-07-31T08:01:29.701Z","updated_at":"2026-04-02T11:35:21.346Z","avatar_url":"https://github.com/htmlstreamofficial.png","language":"HTML","readme":"[](https://preline.co)\n\n\u003ca href=\"https://preline.co\"\u003e\u003cimg src=\"https://preline.co/preline-logo.svg\" alt=\"Preline UI logo\" width=\"200\" height=\"auto\"\u003e\u003c/a\u003e\n\nPreline UI is an open-source set of prebuilt, accessible UI components based on the utility-first Tailwind CSS framework.\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/index.html), interactive [headless Tailwind CSS plugins](https://preline.co/plugins.html), [Tailwind CSS templates](https://preline.co/templates.html), and production-ready [Tailwind CSS examples](https://preline.co/examples.html). It is designed for developers who want flexible markup, scalable design systems, and polished UI patterns without rebuilding everything from scratch.\n\n- [220+ free Tailwind CSS blocks and sections](https://preline.co/examples.html)\n- [5 free Tailwind CSS templates](https://preline.co/templates.html)\n- [27 headless Tailwind CSS plugins](https://preline.co/plugins.html)\n- [Full documentation](https://preline.co/docs/index.html), [Figma](https://preline.co/figma.html), [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 `\u003cbody\u003e` tag:\n\n```html\n\u003cscript src=\"./node_modules/preline/dist/preline.js\"\u003e\u003c/script\u003e\n```\n\nFor setup details, framework integration, and configuration guides, visit the [Preline documentation](https://preline.co/docs/index.html).\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.html) for accessible UI behavior, interactions, forms, navigation, overlays, and productivity workflows.\n\n| Category | Plugin Pages |\n| --- | --- |\n| Disclosure | [Accordion](https://preline.co/plugins/html/accordion.html), [Collapse](https://preline.co/plugins/html/collapse.html), [Tree View](https://preline.co/plugins/html/tree-view.html) |\n| Navigations | [Tabs](https://preline.co/plugins/html/tabs.html), [Scrollspy](https://preline.co/plugins/html/scrollspy.html), [Scroll Nav](https://preline.co/plugins/html/scroll-nav.html), [Stepper](https://preline.co/plugins/html/stepper.html) |\n| Overlays | [Dropdown](https://preline.co/plugins/html/dropdown.html), [Overlay](https://preline.co/plugins/html/overlay.html), [Tooltip](https://preline.co/plugins/html/tooltip.html) |\n| Forms | [Select](https://preline.co/plugins/html/advanced-select.html), [ComboBox](https://preline.co/plugins/html/combobox.html), [Datepicker](https://preline.co/plugins/html/advanced-datepicker.html), [Range Slider](https://preline.co/plugins/html/advanced-range-slider.html), [Input Number](https://preline.co/plugins/html/input-number.html), [File Upload](https://preline.co/plugins/html/file-upload.html), [Strong Password](https://preline.co/plugins/html/strong-password.html), [Toggle Password](https://preline.co/plugins/html/toggle-password.html), [Toggle Count](https://preline.co/plugins/html/toggle-count.html), [Copy Markup](https://preline.co/plugins/html/copy-markup.html), [PIN Input](https://preline.co/plugins/html/pin-input.html), [Textarea Auto Height](https://preline.co/plugins/html/textarea-autoheight.html) |\n| Miscellaneous | [DataTable](https://preline.co/plugins/html/datatables.html), [Carousel](https://preline.co/plugins/html/carousel.html), [Layout Splitter](https://preline.co/plugins/html/layout-splitter.html), [Remove Element](https://preline.co/plugins/html/remove-element.html), [Theme Switch](https://preline.co/plugins/html/theme-switch.html) |\n\n## 𧱠Tailwind CSS Components\n\nBrowse [Tailwind CSS component docs](https://preline.co/docs/index.html) across layout, base UI, forms, navigation, overlays, tables, and advanced integrations.\n\n| Category | Component Pages |\n| --- | --- |\n| Layout \u0026 Content | [Container](https://preline.co/docs/container.html), [Columns](https://preline.co/docs/columns.html), [Grid](https://preline.co/docs/grid.html), [Layout Splitter](https://preline.co/docs/layout-splitter.html), [Typography](https://preline.co/docs/typography.html), [Images](https://preline.co/docs/images.html), [Links](https://preline.co/docs/links.html), [Dividers \u0026 HR](https://preline.co/docs/dividers.html), [KBD](https://preline.co/docs/kbd.html), [Custom Scrollbar](https://preline.co/docs/custom-scrollbar.html) |\n| Base Components | [Accordion](https://preline.co/docs/accordion.html), [Alerts](https://preline.co/docs/alerts.html), [Avatar](https://preline.co/docs/avatar.html), [Avatar Group](https://preline.co/docs/avatar-group.html), [Badge](https://preline.co/docs/badge.html), [Blockquote](https://preline.co/docs/blockquote.html), [Buttons](https://preline.co/docs/buttons.html), [Button Group](https://preline.co/docs/button-group.html), [Card](https://preline.co/docs/card.html), [Chat Bubbles](https://preline.co/docs/chat-bubbles.html), [Carousel](https://preline.co/docs/carousel.html), [Collapse](https://preline.co/docs/collapse.html), [Datepicker](https://preline.co/docs/datepicker.html), [Devices](https://preline.co/docs/devices.html), [Lists](https://preline.co/docs/lists.html), [List Group](https://preline.co/docs/list-group.html), [Legend Indicator](https://preline.co/docs/legend-indicator.html), [Progress](https://preline.co/docs/progress.html), [File Uploading Progress](https://preline.co/docs/file-uploading-progress-form.html), [Ratings](https://preline.co/docs/ratings.html), [Skeleton](https://preline.co/docs/skeleton.html), [Spinners](https://preline.co/docs/spinners.html), [Styled Icons](https://preline.co/docs/static-icons.html), [Toasts](https://preline.co/docs/toasts.html), [Timeline](https://preline.co/docs/timeline.html), [Tree View](https://preline.co/docs/tree-view.html) |\n| Navigations | [Navbar](https://preline.co/docs/navbar.html), [Mega Menu](https://preline.co/docs/mega-menu.html), [Navs](https://preline.co/docs/navs.html), [Tabs](https://preline.co/docs/tabs.html), [Sidebar](https://preline.co/docs/sidebar.html), [Scrollspy](https://preline.co/docs/scrollspy.html), [Breadcrumb](https://preline.co/docs/breadcrumb.html), [Pagination](https://preline.co/docs/pagination.html), [Stepper](https://preline.co/docs/stepper.html) |\n| Basic Forms | [Input](https://preline.co/docs/input.html), [Input Group](https://preline.co/docs/input-group.html), [Textarea](https://preline.co/docs/textarea.html), [File Input](https://preline.co/docs/file-input.html), [Checkbox](https://preline.co/docs/checkbox.html), [Radio](https://preline.co/docs/radio.html), [Switch](https://preline.co/docs/switch.html), [Select](https://preline.co/docs/select.html), [Range Slider](https://preline.co/docs/range-slider.html), [Color Picker](https://preline.co/docs/color-picker.html), [Time Picker](https://preline.co/docs/time-picker.html) |\n| Advanced Forms | [Advanced Select](https://preline.co/docs/advanced-select.html), [ComboBox](https://preline.co/docs/combobox.html), [SearchBox](https://preline.co/docs/searchbox.html), [Input Number](https://preline.co/docs/input-number.html), [Strong Password](https://preline.co/docs/strong-password.html), [Toggle Password](https://preline.co/docs/toggle-password.html), [Toggle Count](https://preline.co/docs/toggle-count.html), [Copy Markup](https://preline.co/docs/copy-markup.html), [PIN Input](https://preline.co/docs/pin-input.html) |\n| Overlays | [Dropdown](https://preline.co/docs/dropdown.html), [Context Menu](https://preline.co/docs/context-menu.html), [Modal](https://preline.co/docs/modal.html), [Offcanvas](https://preline.co/docs/offcanvas.html), [Popover](https://preline.co/docs/popover.html), [Tooltip](https://preline.co/docs/tooltip.html) |\n| Tables | [Tables](https://preline.co/docs/tables.html) |\n| Third-Party Plugins | [Advanced Range Slider](https://preline.co/docs/advanced-range-slider.html), [Advanced Datepicker](https://preline.co/docs/advanced-datepicker.html), [Charts](https://preline.co/docs/charts.html), [Clipboard](https://preline.co/docs/clipboard.html), [Confetti Animation](https://preline.co/docs/confetti.html), [Datamaps](https://preline.co/docs/datamaps.html), [Datatables](https://preline.co/docs/datatables.html), [Drag and Drop](https://preline.co/docs/drag-and-drop.html), [File Upload](https://preline.co/docs/file-upload.html), [Maps](https://preline.co/docs/maps.html), [Toast Notifications](https://preline.co/docs/toast-notifications.html), [WYSIWYG Editor](https://preline.co/docs/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/agency/) | [AI Chat](https://preline.co/templates/ai-chat/) | [CMS](https://preline.co/templates/cms/) | [Coffee Shop](https://preline.co/templates/coffee-shop/) | [Personal](https://preline.co/templates/personal/) |\n\n### Explore More\n\n- [Free Tailwind CSS Blocks and Sections](https://preline.co/examples.html)\n- [Free Tailwind CSS Templates](https://preline.co/templates.html)\n\n## π Preline Pro\n\n[Preline Pro](https://preline.co/pro/index.html) extends the free library with premium UI for serious product teams and commercial apps. It includes [780+ premium Tailwind CSS blocks and sections](https://preline.co/pro/examples.html), [21 premium Tailwind CSS templates](https://preline.co/pro/templates.html), and over 300 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/index.html)\n- [Premium Tailwind CSS Blocks and Sections](https://preline.co/pro/examples.html)\n- [Premium Tailwind CSS Templates](https://preline.co/pro/templates.html)\n\n## π Documentation and Resources\n\n- [Preline UI documentation](https://preline.co/docs/index.html)\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.html)\n\n## π€ Community\n\nFor help, best practices, and product discussions, use [GitHub Discussions](https://github.com/htmlstreamofficial/preline/discussions).\n\nFollow [Preline on X](https://x.com/prelineUI) and support the project on [Product Hunt](https://www.producthunt.com/products/preline-ui/reviews).\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.html) 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 on [Twitter](https://x.com/prelineUI) or leave supportive review on [ProductHunt](https://www.producthunt.com/products/preline-ui/reviews).\n","funding_links":[],"categories":["HTML"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhtmlstreamofficial%2Fpreline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhtmlstreamofficial%2Fpreline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhtmlstreamofficial%2Fpreline/lists"}