Getting Started

Metronic Changelog

Version

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

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.

Fixes

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

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 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

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


               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

Getting Started

Customization

Base Components

Navigation

Forms

3rd-Party Plugins

Metronic Changelog