Getting Started

Metronic Changelog

Version 1

Stay updated with the latest enhancements and fixes in Metronic Tailwind CSS HTML & JavaScript Toolkit. This page provides a detailed log of all the changes, including new features, improvements, and bug fixes for each release.

New

Full Calendar Added Full Calendar plugin with comprehensive calendar functionality and event management. - Preview

WYSIWYG Editor Added WYSIWYG Editor plugin powered by TinyMCE for rich text editing capabilities. - Preview

Dropzone Added Dropzone plugin for drag-and-drop file uploads with preview and progress tracking. - Preview

Updates & Improvements

KTUI Docs Fixed KTTabs show() method to use button element for proper tab activation. - Preview

Docs Added framework version information for all documentation pages.

Docs Improved global framework integration documentation with enhanced examples and clearer instructions.

New

Color Picker Added Color Picker component with HEX, RGBA, HSLA, HSVA, CMYK support, Hue Slider, Opacity control, and Color Preview. - Preview

Updates & Improvements

Select Improved Select component with new


               closeOnEnter

option to control dropdown closure on Enter key press, new


               closeOnOtherOpen

option to manage multiple dropdowns, search input autofocus, new


               dispatchGlobalEvents

option for event dispatching for jQuery compatibility, optimized dropdown close logic for better performance, and fixed search input persistence after close. - Preview

KtUI Updated KtUI to v1.1.3 with latest improvements. - Preview

Fixes

KTSelect Fixed KTSelect issues including search input persistence after close, Enter key handling to close the dropdown and trigger selection, race conditions, dispatch events for compatibility with jQuery event listeners, single select display to use flexbox for better alignment, search and clear selection button, configuration for closes other open dropdowns before opening new one, and handle long text truncate. - Preview

KTDrawer Fixed KTDrawer issues including drawer positioning within persisted Livewire components and proper z-index stacking. - Preview

KTDatatable Fixed KTDatatable issues including improved instance retrieval logic to prevent duplicate instances. - Preview

Global Components Fixed Global Components issues including default base path and Topbar buttons, drawer and user dropdown unresponsive after wire:navigate partial refresh. - Preview

Updates & Improvements

Date Picker Improved Date Picker with Inline Calendar, Date Picker Popup, Multiple Months Support, Date Range Selection, Time Picker, Time Range Selection, Multiple Dates Selection, Min/Max Dates, Date Formats, Year & Months Pickers, Internationalization Support, Dark Mode, and API Examples. - Preview

Select Improved Select component with new


               closeOnEnter

option to control dropdown closure on Enter key press, new


               closeOnOtherOpen

option to manage multiple dropdowns, search input autofocus, new


               dispatchGlobalEvents

option for event dispatching for jQuery compatibility, optimized dropdown close logic for better performance, and fixed search input persistence after close. - Preview

KtUI Updated KtUI to v1.1.2 with latest improvements. - Preview

Fixes

KTToast Fixed KTToast missing styles. - Preview

Fixes

KTToast Fixed KTToast missing styles. - Preview

Updates & Improvements

Security Update Updated to v9.3.8 with important security patches and improvements.

New

Date Picker Added Date Picker component with Inline Calendar, Date Picker Popup, Multiple Months Support, Date Range Selection, Time Picker, Time Range Selection, Multiple Dates Selection, Min/Max Dates, Date Formats, Year & Months Pickers, Internationalization Support, Dark Mode, and API Examples. - Preview

Updates & Improvements

KtUI Updated KtUI to v1.1.1 with latest improvements. - Preview

Updates & Improvements

KtUI Updated to KtUI v1.0.28 with latest improvements. - Preview

DataTable Improved error handling events for remote data sources. - Preview

Updates & Improvements

KtUI Updated to KtUI v1.0.27 with latest improvements. - Preview

Select Improved Select Dropdown Menu position and positioning logic. - Preview

Modal Enhanced Modal backdrop click handling to prevent modal close on backdrop interaction. - Preview

Updates & Improvements

Datatable Checkbox Improved checkbox state handling and event firing for datatable selections.

Select Enhanced native select element synchronization and improved remote data handling.

Select Improved option handling and dropdown positioning for the select component.

Datatable Added


               requestCredentials

support to datatable configuration for advanced HTTP requests.

Modal Enhanced hide logic for modal component to improve reliability.

New

HTML Starter Kits Added Layout 17 Starter Kit for HTML integration. - Preview

Updates & Improvements

Select New API support for enabling, disabling, updating, and refreshing select components. - Preview

Datatable Documentation improvements and examples. - Preview

Fixes

Select Fixed dark mode issue for select component. - Preview

Select Fixed selected container issue for select component. - Preview

Select Added pre-selected options for remote data source. - Preview

New

HTML Starter Kits Added Layout 15 and Layout 16 Starter Kits for HTML integration. - Preview

Updates & Improvements

Select Fixed Select component to properly handle pre-selected values for remote (async) data sources. - Preview

Updates & Improvements

Select Clear native select options on selection clear. - Preview

Select Select component documentation and examples update. - Preview

Image Input Image Input configuration handling and element selection. - Preview

Select Select search result handling and styles. - Preview

Select Select global configuration API support. - Preview

Select Select modal container example and positioning. - Preview

Select Select native synchronization example. - Preview

Select Select with tags demos. - Preview

Fixes

HTML Starter Kits Fixed Layout 4 starter kit HTML content. - Preview

New

HTML Starter Kits Added Layout 15 Starter Kit for HTML integration. - Preview

HTML Starter Kits Fixed Layout 14 mobile view responsive issue. - Preview

Updates & Improvements

Select Enhanced dropdown with custom container support (e.g.


               body

,


               #modalContainer

, etc.).

Select Added remote data support with search and external API integration.

Fixes

Datatable Fix datatable sorting stop working in modal.

New

HTML Starter Kits Added Layout 14 Starter Kit for HTML integration. - Preview

Fixes

HTML Fixed remote select search results not displaying properly - Preview

HTML Fixed Toast RTL centering and add middle position support - Preview

Updates & Improvements

HTML Improved select option rendering and data mapping for better performance - Preview

HTML Support select for remote data fetching with error handling - Preview

New

Next.js Starter Kits Added Layout 24 Starter Kit for new demo layout. - Preview

Next.js Starter Kits Added Layout 25 Starter Kit for new demo layout. - Preview

Next.js Starter Kits Added Inventory Platform - Customer Management app concept for customer management. - Preview

React Starter Kits Added Layout 24 Starter Kit for new demo layout. - Preview

React Starter Kits Added Layout 25 Starter Kit for new demo layout. - Preview

React Starter Kits Added Inventory Platform - Customer Management app concept for customer management. - Preview

HTML Documentation improvements. - Preview

Fixes

HTML Fixed dropdown closing issue when pressing space key in select component. - Preview

New

DataTable Sorting disable feature for specific columns.

React Starter Kits Added Layout 22 Starter Kit for new demo layout. - Preview

React Starter Kits Added Layout 23 Starter Kit for new demo layout. - Preview

Next.js Starter Kits Added Layout 22 Starter Kit for new demo layout. - Preview

Next.js Starter Kits Added Layout 23 Starter Kit for new demo layout. - Preview

New

React/Next.js Added Store - Inventory App Concept for inventory management. - Preview

React Starter Kits Added Layout 18 Starter Kit for new demo layout. - Preview

React Starter Kits Added Layout 19 Starter Kit for new demo layout. - Preview

React Starter Kits Added Layout 20 Starter Kit for new demo layout. - Preview

Next.js Starter Kits Added Store - Inventory App Concept for inventory management. - Preview

Next.js Starter Kits Added Layout 18 Starter Kit for new demo layout. - Preview

Next.js Starter Kits Added Layout 19 Starter Kit for new demo layout. - Preview

Next.js Starter Kits Added Layout 20 Starter Kit for new demo layout. - Preview

New

React Starter Kits Added 3 New Demo Layouts (Layout-15 through Layout-17) for various use cases. - Preview

Next.js Starter Kits Added 3 New Demo Layouts (Layout-15 through Layout-17) for various use cases. - Preview

New

Core Enhanced KTMenu initialization and cleanup processes for better performance and memory management. - Preview

Core Added Livewire navigation support in KTDom helper for integration with Laravel Livewire applications. - Preview

Components Added preserveParentDropdowns option to enhance menu dropdown behavior and prevent unwanted closing. - Preview

React/Next.js Added Carousel component for image and content slideshows. - Preview

React/Next.js Added Code component for syntax highlighting and code display. - Preview

React/Next.js Added Kanban component for task and project management. - Preview

React/Next.js Added Skeleton with Pattern component for enhanced loading states. - Preview

HTML Starter Kits Added 10 Layout Starter Kits for HTML integration. - Preview

React Starter Kits Added 14 Layout Starter Kits for React integration. - Preview

Next.js Starter Kits Added 14 Layout Starter Kits for Next.js integration. - Preview

Updates & Improvements

Docs Enhanced Angular integration guide with project creation and core integration steps. - Preview

Docs Enhanced Laravel integration guide with improved core and styles integration. - Preview

Docs Added Vue integration guide with download instructions. - Preview

React/Next.js Enhanced user management components including account security, permissions, roles, and user profile management. - Preview

React/Next.js Updated UI components including alert, badge, button, chart, command, context-menu, dialog, github-button, and hover-card. - Preview

React/Next.js Updated package dependencies and configuration files for improved stability and performance.

New

Docs Added Laravel Livewire integration guide for demo1 and demo2. - Preview

Docs Added Blazor Server integration guide for demo1 and demo2. - Preview

Docs Added Flask integration guide for demo1 and demo2. - Preview

Docs Added Django integration guide for demo1 and demo2. - Preview

Docs Added Symfony integration guide for demo1 and demo2. - Preview

Docs Added Asp.Net-Core integration guide for demo1 and demo2. - Preview

Docs Added Ruby on Rails integration guide for demo1 and demo2. - Preview

HTML Starterkit Added Laravel Livewire starterkit for demo1 and demo2. - Preview

HTML Starterkit Added Blazor Server starterkit for demo1 and demo2. - Preview

HTML Starterkit Added Flask starterkit for demo1 and demo2. - Preview

HTML Starterkit Added Django starterkit for demo1 and demo2. - Preview

HTML Starterkit Added Symfony starterkit for demo1 and demo2. - Preview

HTML Starterkit Added Asp.Net-Core starterkit for demo1 and demo2. - Preview

HTML Starterkit Added Ruby on Rails starterkit for demo1 and demo2. - Preview

React/Next.js Added Stepper Component. - Preview

React/Next.js Added File Upload Component. - Preview

React/Next.js Added Tree Component. - Preview

React/Next.js Updated Badge Component to support extended theming. - Preview

React/Next.js Updated Alert Component to support extended theming. - Preview

React/Next.js Added Marquee Component. - Preview

React/Next.js Added GitHub Button Component. - Preview

React/Next.js Added Avatar Group Component. - Preview

React/Next.js Added Typing Text Component. - Preview

React/Next.js Added Word Rotate Component. - Preview

React/Next.js Added Video Text Component. - Preview

React/Next.js Added SVG Text Component. - Preview

React/Next.js Added Counting Number Component. - Preview

React/Next.js Added Sliding Number Component. - Preview

React/Next.js Added Shimmering Text Component. - Preview

React/Next.js Added Text Reveal Component. - Preview

React/Next.js Added Gradient Background Component. - Preview

React/Next.js Added Grid Background Component. - Preview

React/Next.js Added Hover Background Component. - Preview

React/Next.js Improved i18n support. - Preview

Updates & Improvements

HTML When multiple option is enabled, users can select multiple options without the dropdown closing after each selection. - Preview

HTML Enhanced Stepper component to support async validation with step cancellation in change event handlers. - Preview

HTML Enhanced Toast component clearAll method to properly remove containers and prevent stale references. - Preview

React/Next.js Migrated to the new radix-ui package.

React/Next.js Updated package dependencies.

React/Next.js Updated Badge component to support extended theming options. - Preview

React/Next.js Updated Alert component to support extended theming options. - Preview

Next.js Improved i18n support with enhanced internationalization features. - Preview

React Updated Vite version to v7.0.0. Latest Node 22.x is required for this upgrade. - Preview

New

Next.js Added SaaS landing page tempalte. - Preview

Updates & Improvements

Global Upgrade package.json dependencies.

New

HTML Added Advanced Select component. - Preview

HTML Added Toast component. - Preview

HTML Added Form Validation docs and examples. - Preview

React Date & Time picker component. - Preview

React Date Input component. - Preview

React Time Input component. - Preview

React Date & Time Input component. - Preview

Updates & Improvements

Global Upgrade to the latest Tailwind CSS v4.1.7 .

HTML Updated Laravel Integration guide and starterkit for v9.2.x . - Preview

HTML Updated Blazor Integration guide and starterkit for v9.2.x . - Preview

HTML Updated Vue Integration guide and starterkit for v9.2.x . - Preview

Fixes

Global Safari custom scrollbar style issue fixed.

New

Next.js Added Metronic Next.js , a complete Next.js version of Metronic. - Preview

HTML Added Store - Client , a complete HTML e-commerce app for online selling. - Preview

React Added Store - Client , a complete React e-commerce app for online selling. - Preview

Next.js Added Store - Client , a complete Next.js e-commerce app for online selling. - Preview

Next.js Added User Mangement , fully function Next.js app for managing users, accounts and settings. - Preview

Updates & Improvements

Tailwind Global upgrade to Tailwind CSS v4.1.5 . - Preview

HTML Metronic HTML migration to KtUI components. - Preview

React Metronic React migration to ReUI components. - Preview

HTML Metronic v9.1.2 legacy docs deployment. - Preview

New

React Integrated the most popular React UI Toolkit, Shadcn UI with Radix. - Preview

Updates & Improvements

Tailwind Support for latest Tailwind 3.4.15. - Preview

Docs Blazor integration guide improvements. - Preview

Docs Laravel integration guide improvements. - Preview

New

React Complete React version of Metronic 9 Tailwind. - Preview

Pulse Laravel REST API Boilerplate for Metronic 9 React. - Preview

Updates & Improvements

Tailwind Support for latest Tailwind 3.4.14. - Preview

Docs Laravel integration guide improvements. - Preview

Menu Menu component improvements. - Preview

Sticky Sticky component improvements. - Preview

Scrollspy Scrollspy component improvements. - Preview

Fixes

Demo 3 Resolved Sticky content sidebar issue. - Preview

Demo 4 Resolved Sticky content sidebar issue. - Preview

Demo 6 Resolved Sticky content sidebar issue. - Preview

Demo 8 Resolved Sticky content sidebar issue. - Preview

Demo 10 Resolved Sticky content sidebar issue. - Preview

Tooltip Fixed the Tooltip issue with delay settings. - Preview

Updates & Improvements

Docs Laravel integration guide improvements - Preview

Fixes

Tailwind Fixed the incorrect content path in


               tailwind.config.js

. - Preview

Webpack Resolved warnings during the production build with


               npm run build:prod

. - Preview

Demo2 Fixed the issue with incorrect sticky header height calculations. - Preview

Demo7 Fixed the issue with incorrect sticky header height calculations. - Preview

Demo9 Fixed the issue with incorrect sticky header height calculations. - Preview

New

Demo 6 New demo added - Preview

Demo 7 New demo added - Preview

Demo 8 New demo added - Preview

Demo 9 New demo added - Preview

Demo 10 New demo added - Preview

Updates & Improvements

Packages Updated all global dependencies to their latest stable versions in


               package.json

.

Demo 3 Added a sticky scrollable content layout - Preview

Demo 4 Added a sticky scrollable content layout - Preview

Docs React integration guide improvements - Preview

Docs Vue integration guide improvements - Preview

Docs Angular integration guide improvements - Preview

Docs Laravel integration guide improvements - Preview

New

Demo 2 New demo added - Preview

Demo 3 New demo added - Preview

Demo 4 New demo added - Preview

Demo 5 New demo added - Preview

Docs Blazor Server integration guide added - Preview

Starterkit Blazor Server starterkit added - Preview

Updates & Improvements

HTML Added


               antialiased

class to the body tag - More

Docs React integration guide improvements - Preview

Docs Vue integration guide improvements - Preview

Docs Angular integration guide improvements - Preview

Docs Laravel integration guide improvements - Preview

Fixes

Demo 1 Fixed the display issue of the User dropdown(header's right navbar) submenu in mobile mode. - Preview

KTSticky Resolved the offset calculation issue in


               src/core/components/sticky/sticky.ts

. - Preview

New

Docs Next.js integration guide added - Preview

Starterkit Next.js starterkit added - Preview

Updates & Improvements

Docs React integration guide improvements - Preview

Docs Vue integration guide improvements - Preview

Docs Angular integration guide improvements - Preview

Fixes

CSS Resolved CSS errors in


               dist/assets/css/styles.css

.

Updates & Improvements

Docs Angular integration guide enhancements - Preview

Docs React integration guide improvements - Preview

Docs Vue integration guide improvements - Preview

CSS The CSS source for Demo1 has been relocated from


               src/core/plugins/layouts/demo1.js

to


               src/css/demos/demo1.css

.

This change resolves the CSS errors in


                dist/assets/css/styles.css

caused by the PostCSS issue with nested CSS elements.

- More

Fixes

CSS Resolved CSS errors in


               dist/assets/css/styles.css

.

Updates & Improvements

Docs Angular integration guide enhancements - Preview

Docs React integration guide improvements - Preview

Docs Vue integration guide improvements - Preview

SPA Use type-only exports in


               index.spa.ts

.

Package Due to the increasing package size, reaching


               10gb

, the


               Metronic v8.x

package has been moved. - More

Fixes

Components Resolved an issue where the


               transitionEnd

and


               animationEnd

events were not triggered in Firefox.

KTReparent Fixed an issue where the component was not working during the window resize event - Preview

New

Initial Release

Getting Started

Customization

Base Components

Navigation

Forms

3rd-Party Plugins

Metronic Changelog