Preline Versions Save

This update brings brand new 2 free Template, Dashboard page, New Dark Color scheme for free components and examples to align them with the Pro and other minor enhancements.

New Examples and Templates pages

• Templates: Agency
• Templates: Creative Agency
• Examples: Application Admin Page
• Examples: Hero Sections
• Examples: Blog Sections
• Examples: Testimonials
• Examples: Features: General
• Examples: Features: Stats
• Examples: Clients Sections
• Examples: Navbars (Headers)
• Examples: Contacts
• Examples: Footers

Fixes and Improvements

• Improved: Input and Textarea Floating Label animations
• Bunch of other fixes and improvements.

New Plugins, Components, Improvements, Bug Fixes and more

This update brings new ComboBox (Autocomplete) plugin, Searchbox components, improvements and bug fixes based on feedback reported on Github.

Please note, this update requires to use the lates version of Tailwind CSS v3.4.x.

New Plugins

• Plugins: ComboBox (Autocomplete)
• Plugins: Theme-Switch (Darkmode)
• New Feature: Added preventSearchFocus to Advanced Select that sets autofocus for the search field inside a dropdown list if the value is true.

New Components

• Documentation: Preline JavaScript
• Component Plugin: ComboBox (Autocomplete)
• Component Plugin: Searchbox
• Component Plugin: PIN Input - Show PIN code suggest on iOS keyboard - [Issue #188 by @hieuhuynh93]
• Textarea: Modal example
• Input Number: Step Controls
• Input Number: Negative value
• Input Number: Maximum value

Updates

• Updated: Tailwind CSS to v3.4.1

Fixes and Improvements

• Docs: A beta feature, you can now choose to include or exclude dark classes when copying code to the clipboard. Set this option once, and it will apply globally, making dark classes optional.
• Docs: Added a new Preline JavaScript page. This page explains how Preline JavaScript works and its methodology.
• New size- utilities:* Tailwind CSS finally added a new size-* utility that sets width and height at the same time. We updated them!
• Extended min-width, max-width, and min-height scales: Tailwind CSS finally extended the min-width, max-width, and min-height scales to include the full spacing scale. We updated them!
• Improved: NextJS avoiding setTimeout solution [Issue #270]
• Feature request: Added Combobox (Autocomplete) plugin [Issue #140], [Issue #199]
• Feature request: Tag editor to Advanced Select [Issue #245]
• Pull Request: Add support for min, max and step [PR #306]
• Pull Request: Firing on-change event when item is removed [PR #247]
• Pull Request: Fixes empty array (package.json) [PR #242], [Issue #241]
• Pull Request: Replaced generate-dts script with a config file [PR #232]
• Fixed: Cannot dismiss opened Advanced Select controls while using FireFox [Issue #318]
• Fixed: Search Issue with Non-Latin Characters in Select Plugin [Issue #313]
• Fixed: Vertically centered modals don't work [Issue #309]
• Fixed: Setting the data-hs-overlay-keyboard to true doesn't prevent the Esc button to close the modal [Issue #290]
• Fixed: Window scroll is re-enabled when the top overlay is closed irrespective of Bottom overlay [Issue #281]
• Fixed: Unnecessary console.log calls for the dropdown plugin [Issue #273]
• Fixed: Overlay backdrop element not being removed/hidden after resizing screen size [Issue #267], [Issue #136]
• Fixed: Select plugin placeholder not cleared when default values loaded [Issue #265], [PR #266]
• Fixed: Modal focus trap multiple key event listeners [Issue #249]

This update brings minor enhancements and resolves issues based on feedback reported on Github.

Fixes and Improvements

• Improved: Added IStaticMethod to Framework Guides pages.
• Improved: JavaScript file sizes. [Issue #204 @kpietraszko]
• Improved: Stacked Overlays option is added to Overlay plugin [Issue #134]
• Improved: Advanced Select with dynamic validation states, the ability to add/remove options and more. [Issue #183], [Issue #190] and [Issue #216]
• Fixed: Keyboard navigation in advanced select [Issue #202]
• Fixed: Removed unnecessary console.log messages [Issue #209] and [Issue #185]
• Fixed: Bug with the carousel listening event [Issue #215]

Fixed path name on package.json file.

Updated script file name from index.js to preline.js

Meet Preline UI v2.0.0 - this release features:

• Hundreds of new Components
• 9 new Plugins
• Third-Party Plugins Integrations
• TypeScript Support
• and many more..

Please note that there are some breaking changes to bear in mind when moving from v1.9.0 to v2.0.

New Examples pages

• Examples: Hero Forms
• Examples: Galleries
• Examples: Application Tables

New Plugins

• Plugins: Advanced Select
• Plugins: Input Number
• Plugins: Strong Password
• Plugins: Toggle Password
• Plugins: Toggle Count
• Plugins: Copy Markup
• Plugins: PIN Input
• Plugins: Stepper
• Plugins: Carousel

New Components

• Component Plugin: Advanced Select
• Component Plugin: Strong Password
• Component Plugin: Toggle Password
• Component Plugin: Toggle Count
• Component Plugin: Copy Markup
• Component Plugin: Charts
• Component Plugin: Datamaps
• Component Plugin: WYSIWYG Editor
• Component Plugin: Clipboard
• Component Content: Typography
• Component Content: Images
• Component Content: Links
• Component Content: Dividers and <hr>
• Component Content: KBD
• Component Content: Custom scrollbar
• Component Base: Chat Bubbles
• Component Base: Carousel
• Component Base: Datepicker
• Component Base: File Uploading Progress Form
• Component Base: Ratings
• Component Base: Stepper
• Component Base: Timeline
• Header: Center aligned navbar option
• Mega Meny: Columns
• Component Basic Forms: Input Number
• Component Basic Forms: Range Slider
• Component Basic Forms: Color Picker
• Accordion: Active content bordered
• Alerts: Bordered styles
• Avatar: Avatar Examples
• Avatar: Solid color variants
• Avatar: Soft color variants
• Avatar: Outline color variants
• Avatar: White color variants
• Avatar Group: With Tooltip
• Badge: Outline color variants
• Badge: Working with icons
• Badge: Badge with Avatar
• Badge: Animation
• Badge: Button
• Buttons: White Color Button Variants
• Buttons: Link Color Button Variants
• Buttons: Button examples
• Button Group: Toolbar
• Card: Top bordered card
• Card: Panel actions
• Lists: List marker
• List Group: List group invoice
• List Group: List group examples
• Progress: Label at the end
• Progress: Title label
• Progress: Floating label
• Progress: Shape
• Progress: Steps
• Progress: Circular Progress
• Toasts: Avatar
• Toasts: Progress
• Tabs: Horizontal scroll
• Breadcrumb: Bordered
• Breadcrumb: "More" static button
• Breadcrumb: "More" button with Dropdown
• Pagination: Bordered
• Pagination: Bordered Group
• Pagination: Stretched
• Pagination: Mini size
• Pagination: Working with tooltip
• Pagination: Jumper
• Pagination: More with Dropdown
• Pagination: Sizes
• Pagination: Shape
• Input: Gray input
• Input: Underline input
• Input: Floating label
• Textarea: Gray input
• Textarea: Underline input
• Textarea: Floating label
• Select: Gray input
• Select: Floating label
• Switch: With Icons
• Switch: Sizes
• Switch: Solid color
• Switch: Soft color variant
• Popover: Review popover example
• Popover: User popover example
• Modal: Custom backdrop color
• Offcanvas: Custom backdrop color

Breaking changes

• Dropped: Bootstrap Icons in favor of Lucide
• Changed: Border radius changed from rounded-md to rounded-lg for all components
• Renamed: Modal in the Plugins to Overlay.
• Dropped: Mega Menu in the Plugins page causing confusion due to duplication with the Dropdown. However, full examples are in the Component pages.
• Dropped: Offcanvas in the Plugins page causing confusion due to duplication with the Modal. However, full examples are in the Component pages.
• Dropped: Sidebar in the Plugins page causing confusion due to duplication with the Modal. However, full examples are in the Component pages.
• Dropped: Popover in the Plugins page causing confusion due to duplication with the Tooltip. However, full examples are in the Component pages.

Code improved components:

• Accordion
• Alerts
• Avatar
• Badge
• Blockquote
• Buttons
• Button Group
• Card
• Collapse
• List Group
• Lists
• Static Icons
• Toasts
• Navs
• Tabs
• Scrollspy
• Mega Menu
• Breadcrumb
• Pagination
• Input and Textarea are now in sepearate files
• Dropdown

Added :disabled class style by default for components:

• Accordion
• Alerts
• Badge
• Buttons
• Toasts
• Navs
• Tabs
• Pagination
• Input
• Input Group
• File Input
• Checkbox
• Radio
• Switch

Fixes and Improvements

• Fixed: Overlay plugin - hs-overlay-backdrop-open: class not working with dark: class.
• Fixed: Table - Products Review broken on Firefox [Issue #107]
• Fixed: All examples in example page have a unnecessary ,nav closing tag [Issue #97]
• Improvements: Simplified RTL support with logical properties now supported in Preline.
• Improvements: ... dropped in favor of ... tag.
• Improvements: The markup for progress bars has been updated in v2.0.0. Now, role="progressbar" and the relevant aria-* attributes are on the outer progress element, leaving the inner bar purely for the visual presentation of the bar and optional label.
• Bunch of other fixes and improvements.

Learn more here

New Examples pages

• Examples: AI Prompt
• Examples: Cover Page
• Framework Guides: SolidJS
• Framework Guides: Qwik
• Framework Guides: Svelte
• Framework Guides: Remix

Fixes and Improvements

• Fixed: Tooltip plugin - Tooltip not closing on firefox. [Issue #71]
• Fixed: Tooltip plugin - Accordion plugin - Placing the Tabs under the Accordion forces all Tab items to be active as initial when click the Accordion item. [Issue #63]

Learn more here

New Examples pages

• Examples: Pricing Page
• Examples: Application Forms Layouts
• Examples: Clients Sections
• Examples: Pricing Sections
• Examples: Testimonials

Fixes and Improvements

• Improved: Framework Guides pages with some updated content and added Stackblitz playground demos.

Learn more here

New Examples pages

• Examples: Application Tables
• Examples: Application Stats
• Examples: Application Navbars
• Examples: Application Invoice
• Examples: Blog Articles
• Examples: Hero Sections
• Examples: Icon Sections
• Examples: Modals

Fixes and Improvements

• Fixed: Minor fix for Tooltip plugin - overlap issue when multiple tooltips are used.

Learn more here

What's new

New Starter Pages & Examples additions:

• New Hero Sections
• New Blog Sections
• New Pricing Sections
• New Features: General
• New Features: Navs
• New Features: Stats
• New Announcement Banners
• New Card Sections
• New Modals
• New Feedback Forms

Overlay (modal, offcanvas, sidebar) Plugin enhancement Added hs-overlay-backdrop-open class to have more control over overlay backdrop styles.

Fixed Astro Guides Typos Check out @alec-c4's workaround for alternative solution.

Learn more here