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 (123)
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
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 command
npm install @keenthemes/ktui @popperjs/core autoprefixer sass
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
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.
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
