Metronic 9.2 Release
A New Era with KtUI, ReUI, and Tailwind 4, React 19, Next.js 15!
We’re thrilled to announce the most anticipated Metronic update ever! This giant shift forward brings transformative changes for a faster, community-driven future.
A Revamped Codebase for Speed and Scalability
With full Tailwind CSS 4 integration, we’ve reshaped Metronic’s codebase for smoother, quicker updates. Our optimized development flow means faster feature rollouts. While some breaking changes are introduced, they’re essential to keep Metronic cutting-edge.
Introducing KtUI and ReUI: Open Source Powerhouses
This update introduces two open source UI libraries: KtUI for vanilla JavaScript and ReUI for React. Sharing a unified design system, they ensure Metronic’s consistent, sleek look across both platforms.
KtUI: Tailwind-Powered Components for HTML
KtUI, our Tailwind CSS-based open source library, powers Metronic’s HTML version, enabling community-driven growth. Its high-quality components and JavaScript functionality simplify building dynamic interfaces.
- New Naming Convention: KtUI classes use
kt-prefixes for clarity and to differentiate from Tailwind’s built-in classes. - Data Attributes:
data-kt-attributes enable lazy JavaScript initialization with minimal code. - Theme System: Inspired by Shadcn, KtUI’s CSS variable-based theming aligns with Tailwind 4 workflows.
ReUI: Accessible React Components with Radix UI
ReUI brings Metronic’s design system to React, using Radix UI primitives for accessible, Tailwind-tailored components. Perfect for React or Next.js apps, ReUI ensures a polished, cohesive experience alongside KtUI.
Why Vanilla JS and React?
We’ve prioritized vanilla JavaScript and React to align with development trends and AI tooling advancements. Supporting all frameworks (like Vue or Angular) is resource-intensive, so we’re focusing on maximum user value. Vue and Angular devs can still use Metronic’s HTML/JS features via our SPA integration guides in Metronic’s documentation.
Breaking Changes, Bigger Promises
This is Metronic’s biggest shift since launch. Built on KtUI, ReUI, and Tailwind 4, it’s now more scalable and community-focused. Breaking changes require adjustments, but they pave the way for a dynamic platform.
What’s Next?
We’re just getting started. Here’s what’s coming:
- Faster Updates: More frequent releases for HTML, React, and Next.js with advanced components.
- Select and Datepicker Components: Core functionality is ready, with styled releases due soon.
- Community Growth: Support KtUI and ReUI by starring KtUI on GitHub and ReUI on GitHub, sharing, and contributing.
Join Us in Taking Metronic to the Next Level
With KtUI, ReUI, and Tailwind 4, Metronic is more powerful and community-driven than ever. Star KtUI and ReUI on GitHub, share with your network, and contribute to shape Metronic’s future. Got feedback? Comment or reach out via Metronic’s support page. Let’s build something amazing together!
— The Metronic Team
Replies (96)
Issue running NextJs version, missing NEXT_PUBLIC_BASE_PATH on env while it being use on API call.
Hi,
Thanks for the heads-up. Noted, we will add in the next update update of Metronic v9.2.1:
NEXT_PUBLIC_API_URL=
NEXT_PUBLIC_BASE_PATH=Regards,
Sean
Looks good, but disappointed that Angular didn't make it. In this post you've made a mention of SPA integration guides (and its in Bold)... but I haven't been able to find it in the docuemntation.
It would have been good to apply a hyperlink to it, to make it easier to get the documentation.
Hi,
We have just updated Metronic 9.2 Angular Spa Integration guide here. Also please refer to the updated Github repo(access from the top header bar's right button).
Regards,
Sean
Thanks Sean much appreciated.
Much Appreciated Sean.
I have followed the guide and I wanted to double check, is there meant to be a styles.css in dist/assets/vendor/ktui ? I'm getting errors it cannot find it and the metronic-tailwind-html-v9.2.0 doesn't appear to have it.
I've also got KTDOM error which there appears to be an open issue already.
Hi,
Do you still have this issue ? If yes, can you please create a separate support request via https://devs.keenthemes.com/question/create so we can help you promptly.
Regards,
Sean
I'm having heavy problems integrating it with angular with strange errors located in the ktui package. Could you priorize Angular docs since many users now have asked for it? Thanks for your amazing work!
The Metronic 9.2 update is truly impressive! The integration of Tailwind CSS 4, React 19, Next.js 15, along with the introduction of KtUI and ReUI, showcases a significant advancement in UI development. These enhancements promise improved scalability and performance for our projects.Siemens resellers in Qatar
Hi 
,
Thank you for the great feedback on the Metornic 9.2 update. Yes, it was a huge work by our team. We are a long todo list and we will start shipping new components, concept apps and more in regular updates.
If you have a success story working with Metronic, it would be a great to make a case study and share with the community. You can reach us via our support email support@keenthemes.com if you have anything to share.
Regards,
Sean
Hello Keenthemes team,
With the release of Metronic 9.2.0, I see there are now two React versions available: the existing Vite-based build and a new Next.js implementation. I personally prefer Vite for its simplicity and speed, but I’m wondering about long-term support. Will the Vite version continue to receive updates and bug fixes, or do you plan to focus exclusively on Next.js in future releases? Which version would you recommend choosing today? Is there any routemap?
Thank you for your guidance!
Hi,
Sorry for the late reply. Sure, we will put our full focus on HTML,Vite and Next.js version and we will keep all version synced with all new features released regually. Our ReUI library is developed as open-source and will be used as a main UI library for Metronic. I hope you can support us with a start
Regards,
Sean
will Github repo be updated to reflect the latest version? current repo: https://github.com/keenthemes/metronic-tailwind-html-integration does not reflect the latest changes, correct?
Having crazy issues setting up project from scratch to be fully integrated. Github pre-integrated will help a lot.
Hi,
Thanks for the feedback. We will update v9 Github repo shortly.
Regards,
Sean
Thank you, i appreciate if you can update the Angular version at least for now: https://github.com/keenthemes/metronic-tailwind-html-integration/tree/main/metronic-tailwind-angular
Hello Sean, any update on updated github repo for angular project?
Hi,
Sorry for the late reply. We have updated the Angular Guide for Metronic v9:
https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/angular along with the Demo 1 Starter Kit:
https://github.com/keenthemes/metronic-tailwind-html-integration
Please let us know if you need any further assistance.
Regards,
Sean
I'm also dependent on that, thanks for updating!
Hi @Sean, is there a way to avoid using Supabase for authentication in regards to the React/Tailwind theme?
Seems like a hard requirement especially for projects that integrating other backends.
Hi,
The current authentication flow provides a minimal and solid approach to secure authentication. To tailor it to your project's specific needs, please share your detailed authentication requirements.
This will allow us to provide targeted guidance and recommendations.
Best regards,
Sean
Well, as I said, it's tightly coupled with Supabase, which is ok if you want to use Supabase, but if you don't then you need to refactor accordingly.
That's not a big deal other than you cannot integrate to existing systems without ditching the supabase first.
Thanks for the support but I will have to figure it out myself. I was hoping for some config or some interface to implement.
Hi,
Appreciate your feedback. We will think of switchable auth module with API abstraction.
Regards,
Sean
I'm having the same difficulty removing authentication with supabase, I'll need to refactor everything. I also chose the pure react version because with next 15 the performance is very bad, it takes up to 7500ms for the first page load. Is there any solution for the performance of Next 15?
Hi ,
In production Next.js works quite fast. In dev mode it may be slower in the first loads. Next.js is very popular framework and there is a huge demand for it.
You can also use Vite version, default React app. It's faster and its more suitable for admin apps while next.js can be used for frontend apps where the page content is available for search engines.
Regards,
Sean
Laravel doesn't work, I've already updated it based on your repository, I downloaded the new version 9.2. However, when I try to build it I get:
✗ Build failed in 341ms
error during build:
[vite:css] [postcss]
/resources/css/app.css:2:127933: Missed semicolon
hay @sean, i got this error too..
would you help pls?
Hi,
Please get the latest @keenthemes/ktui package where this issue was fixed for Vite builds.
Regards,
Sean
Hi, I’m currently using Metronic Composer 9.1.2 to analyze the template provided. I plan to adapt the template using Astro.js, so I’d like to know if the current version of Composer is fully compatible with Metronic 9.2. Should I wait for an updated version of the Composer, or can I continue working with 9.1.2 to extract sections as master pages and individual components? Also, will the class naming and configuration remain consistent between versions?
Hi,
Thank you for your feedback. We will provide the Composer v9.2 update shortly(please redownload it from your keenthemes.com/downloads account in an hour). We would suggest referring to the Composer v9.2 as our future new updates will be for Metronic v9.2 along with ktui.io
Regards,
Sean
Have error in React 19 no need use --force
-----------
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-helmet-async@2.0.5
npm ERR! Found: react@19.1.0
npm ERR! node_modules/react
npm ERR! react@"^19.1.0" from the root project
npm ERR! peer react@">=16.8.0" from @dnd-kit/accessibility@3.1.1
npm ERR! node_modules/@dnd-kit/accessibility
npm ERR! @dnd-kit/accessibility@"^3.1.1" from @dnd-kit/core@6.3.1
npm ERR! node_modules/@dnd-kit/core
npm ERR! @dnd-kit/core@"^6.3.1" from the root project
npm ERR! 2 more (@dnd-kit/modifiers, @dnd-kit/sortable)
npm ERR! 88 more (@dnd-kit/core, @dnd-kit/modifiers, @dnd-kit/sortable, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.6.0 || ^17.0.0 || ^18.0.0" from react-helmet-async@2.0.5
npm ERR! node_modules/react-helmet-async
npm ERR! react-helmet-async@"^2.0.5" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react@18.3.1
npm ERR! node_modules/react
npm ERR! peer react@"^16.6.0 || ^17.0.0 || ^18.0.0" from react-helmet-async@2.0.5
npm ERR! node_modules/react-helmet-async
npm ERR! react-helmet-async@"^2.0.5" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
Hi,
We have just double checked the Metronic 9 React/Vite setup and it worked fine. Could you please check https://docs.keenthemes.com/metronic-react/getting-started/installation and make sure your Node version is up to date ?
Please use "npm install --force" to prevent React 19 dependency resolution error.
Regards,
Sean
I understand that using npm install --force allows the source to run fine, but I'm concerned that integrating it into the product might cause version incompatibility issues. Is there a way to improve this update for future compatibility?
Hi,
Since Metronic 9 is based on React 19 it will take some time until those dependencies align with React 19. However current Metronic can be built successfully and use for production.
Regards,
Sean
Hello.
First I want to congrats on new upgrade. Amazing job!
I tried to migrate previous version to new one for Angular but didn't get well.
Is there any upgrade docs or are you still working on Angular update? Last time I used GitHub repo for starting point (https://github.com/keenthemes/metronic-tailwind-html-integration) but there is also old version of Angular (v17).
Thanks.
Hi,
Thank for your your feedback. We will provide Angular 19 migration soon for Metronic 9 HTMl/JS based on KtUI components. Expect this in the upcoming updates ASAP>
Regards,
Sean
Perfect, thank you!
Hi, I checked but couldn't see demos in themeforest update or metronic downloads page. When will the demos be ready?
Hi,
Metronic v9.2 is fully provided in the themeforest download package. For Metronic 9 React/Next.js version all 10 demos are fully included. To switch to a required demo please refer to Metronic 9 Next.js and Metronic 9 React docs.
The HTML version also includes all 10 demos, under "metronic-tailwind-html-v9.2.0/dist/html" folder.
The Metronic downloads is for Metronic 8 only since it's total package size is over 10GB. Metronic 9 is distributed via themeforest package.
Regards,
Sean
Same here, clean installation of React / Tailwind will result in errors while ```npm install```
As stated in the Metronic React Vite Docs have you tried to use "npm install --force" due to React 19 dependency resolution ? if not, please try so to get Metronic 9 React installed properly.
yy, I've tried --force
the installation completes successfully but then npm run dev won't run with:
"PostCSS Plugin failed: Cannot find module 'postcss-import'"
Hi,
We could not reproduct this and haven't received such issue from other users.
Are you getting this with the original Metronic 9.2.0's vite package ?
Is your Node.js up to date ?
Regards,
Sean
@Sean, I am very sorry about this.
the issue was caused by a dirty installation.
The steps to reproduce my issue (which was not an issue of metronic) are:
1) Create a folder and add the files of Metronic v9.1
2) Install node modules from 9.1
3) Get all files from 9.2 and throw into the *existing* folder you created in step #1
4) try to install => boom
So, I'd say that's not an issue.
Thank you for your patience with me
I can not run html version in local host. I can build the js and css, but can not preview the demos. It's showing up broken layout. Please check Laravel and html version both are unsable.
Hi,
I have just double checked the Metronic v9.2.0 on localhost and it worked as expected. May I know what steps did you take ? Did you run "npm install" and "npm run build" in order to fully install the dependecies and compile the
The HTML version also includes all 10 demos, under "metronic-tailwind-html-v9.2.0/dist/html" folder.
Regards,
Sean
Hi
The legacy documentation for Metronic 9.1.x is now online.
If you're using the previous version or need to reference older components and structure, you can access it here:
https://keenthemes.com/metronic/tailwind/docs-legacy
Thanks
Thank you for bringing this back online.
Just so you know, many pages are broken, see :
https://keenthemes.com/metronic/tailwind/docs-legacy/components/button
Thank you, we will double check it asap.
Its giving error to laravel fresh project without any starterkit.
@import "../metronic/css/styles.css";
styles.css giving the following error[plugin:@tailwindcss/vite:generate:serve] Can't resolve '../../node_modules/@keenthemes/ktui/styles.css' in 'F:\Web\metronic\resources\theme\css'
I have already install packages using this commandnpm install @keenthemes/ktui @popperjs/core autoprefixer sass
Hi
We will improve the integration docs as soon as possible.
Thanks
Hello, is there still a way to access the documentation for 9.1.2 ?
Because the markup in the new documentation accessible from https://keenthemes.com/metronic/tailwind/docs/ is quite different
Hi
Good point. Sure, we will deploy https://keenthemes.com/metronic/tailwind/docs-legacy within 24 hours.
Regards,
Sean
Thank you very much !
Hello waiting for this to be release soon.
Its released
https://keenthemes.com/metronic/tailwind/docs-legacy
I have a Laravel application that is working perfectly according to your documentation. However, I am trying to install Ktui, but it doesn't work.
Apparently, it doesn't recognize the styles.
========app.css===========
/* Main style */
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "../metronic/css/demos/demo1.css";
/* Keenicons */
@import "../metronic/vendors/keenicons/duotone/style.css";
@import "../metronic/vendors/keenicons/filled/style.css";
@import "../metronic/vendors/keenicons/outline/style.css";
@import "../metronic/vendors/keenicons/solid/style.css";
=========app.js ===========
import "@keenthemes/ktui/dist/ktui.js";
import "../metronic/core/index";
import "../metronic/app/layouts/demo1";
=======page.blade.php=======
<span class="kt-badge kt-badge-primary">Primary</span><span
class="kt-badge kt-badge-secondary">Secondary</span><span
class="kt-badge kt-badge-destructive">Destructive</span><span
class="kt-badge kt-badge-warning">Warning</span><span
class="kt-badge kt-badge-success">Success</span><span
class="kt-badge kt-badge-info">Info</span><span class="kt-badge kt-badge-mono">Mono</span>
I'm following this documentation:
https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/laravel
Noted and we will update the Laravel integration guide ASAP. Stay tuned on this here.
I'm anxiously waiting. But from what I've seen, will Metronic lose the color style it had until yesterday? Some margins and paddings look strange. But I think it should be possible to implement some things from the previous version in this new one.
Hi,
The update should available shortly once its approved by Themeforest.
We've maintained padding and margins in line with the original Metronic, ensuring familiar and consistent spacing.
Metronic, following KtUI offers Primary, Secondary, Mono and Destructive(danger) colors whlist components like badges and alerts have all warning, success, info states.
Plus, you have access to the comprehensive Tailwind color palette at for endless customization possibilities.
If you noticed any odd spacings appreciate if you send us a screenshot via support@keenthemes.com
Best regards,
Regards,
Sean
That's right, Metronic is very flexible for customization. It's going to be a great experience.
Thanks a lot Much appreciated.
not appearing in my themeforest download, its still downloading older version 9.1.2
Hi,
Thank you for the heads-up.
The update should available shortly once its approved by Themeforest.
Regards,
Sean
