Metronic 9 with Tailwind CSS Released!
We are thrilled to release a year of hard work for Metronic 9 with Tailwind CSS! As Tailwind CSS becomes the de facto UI framework for modern sites, Metronic 9 aligns with this trend right on time.
What's New:
- Complete Figma Files: Every single page, component, and block come with comprehensive Figma design files.
- Advanced Theming: Tailwind CSS is tailored to fit Metronic's unique design system with advanced style settings.
- Extensive CSS Components: Over 20 custom classes for components like buttons, badges, inputs, and more.
- Interactive JavaScript Components: More than 20 interactive elements, including datatables, modals, tabs, drawers, tooltips, dropdowns, menus, and more.
- Business-Ready Pages: Over 100 ready-to-use business pages, CRUDs, and forms.
- In-Depth Documentation: Detailed examples, code previews, and API guides to help you get the most out of Metronic.
- Metronic Composer Tool: Enhance your development routine with our tool specifically designed for Metronic Tailwind-based projects.
What's Next:
- New JavaScript Components: Upcoming advanced components like advanced select, tagify, datepicker, calendar, and snackbar to make Metronic 9 enterprise-ready.
- New Demos: Unique styles and layouts for real-world app concepts.
- New Pages, Apps, and CRUD Solutions: Continuously expanding our collection.
- Ongoing Documentation Improvements: Covering more backend and frontend framework integrations.
- Native React and Next.js Versions: Fully utilizing the design and features of the default HTML version for developing modern web apps in the shortest amount of time and at the lowest costs.
- And Much More: Aiming to make Metronic your one-stop, long-term foundation for modern web apps.
Experience Metronic 9 in Action:
Explore the Live Preview to see Metronic 9 in action and dive into the details with our comprehensive Online Documentation.
Metronic 8.x:
We will continue to support Metronic 8.x for Bootstrap as part of the main package, including third-party plugin updates, bug fixes, and improvements.
Thank you for your continued support. We can't wait for you to experience the new Metronic 9 with Tailwind CSS!
Replies (74)
I am unable to find the react/html code for the prebuilt 100+ pages for the metronic 9.x template. Can you please help me download it. Thanks. Where can i download this template - https://keenthemes.com/metronic/tailwind/demo1/
Hi,
Please note that the v9.x initial release comes with HTML pages only. The native React/Next.js version of v9.x will be released as soon as possible. We are working on it currently. Once the Metronic v9 React/Next.js is released you can download it for free.
In the meantime, we have React Integration Guide that show how current HTML pages can be used within a React app.
Regards.
Neither NextJS and React samples seem to be working properly. Issue after issue, whatever I try. The v8 examples work on the first try; a similar experience for v9 would be splendid.
Hi,
Can you please retry? We have pushed a fix just now. We will update the guides as well shortly.
Regards.
Where are all the 50+ demos in the new download / update from ThemeForest?
I appreciate that the download file now is much slimmer and it's not few GBs in size, but I am also worried where all the demos are gone now?
Can we still download those separately somehow?
Thanks.
Hi,
All demos are still available from 2 alternative download sources. Please check the latest Metronic package from the Themeforest (we released it a few hours earlier) and you will find instructions to download from a private Google Drive and Metronic Download site as well. Now downloading the demos separately become more convenient.
Regards.
I'm looking forward to the release of the Nuxt version.
Hi 
,
Thanks for the heads-up!
Noted, at this stage, we are going to release an integration guide for the Nuxt framework similar to Vue Integration Gude.
Regards.
Great news! But how can I really use the tailwind html components? Most of the tailwind documentation is locked only for subscribed tailwind users...
Hi,
After purchasing Metronic from Themeforest you can get a full source code of our Tailwind JavaScript components and use it further within Metronic environment or in your projects.
Regards.
Hi,
I am not very familiar with Tailwind yet, but looking for the best way to implement a full-width horizontal header layout instead of the default sidebar layout. Would this be available to implement whilst having a Metronic license?
Tailwind version bug
A dark front ground appears when clicking on top menu button in mobile version
<a>https://i.postimg.cc/nrf3FTRr/kt-bug.png</a>
Hello,
We bought Metronic a long time ago. We did not use Bootstrap because we did not prefer it, but TailwindCSS and Metronic 9 were on our radar again. We haven't started our new project yet and we want to use this license with Metronic 9. Therefore, if your development schedule is clear, I would like to know how long we have to wait for innovations.
Our project will be based on Vite React. We don't want to use TypeScript. I would appreciate it if you could add your instructions to the document accordingly.
Hi,
Sure, you can use your license for Metronic 9 Tailwind React.
We are currently preparing our Metronic 9 Tailwind + React/Next.js MUI + Base + (8+ In-house react components) + Vite + JS/TS stack for release. It's hard to confirm the timeline but this stack is now our priority and aiming to release it from several weeks up to a few months of time.
Stay tuned!
Regards.
how to use ajax jquery in metronic 9?
how to use it, in html?
Simply install jquery via npm
npm i jqueryCreate file
jquery.js, then add this code to import $ from "jquery"
window.$ = window.jQuery = $Then you can add this file to the place you want to use Ajax
Does not works
Hi,
Could you please provide more info ?
Regards.
Hello Sean,
We just started working on a dashboard on Metronic 8 React. Can you share any timelines for Metronic 9 on React/Next ? Should we wait on our development?
Your input is appreciated since we might be able to wait a month but more would be difficult.
Hi,
Thanks for the heads-up.
It may take from several weeks up to a few months. We are doing our best to release it asap.
Regards.
Hi Sean,
I appreciate the effort of your team.
I am using Metronic 8 and happy with it. However, I realize that I can download Metronic 9 as well so I wonder if I can use Metronic 9 with my current license or this is just a trial version?
If I want to start my new project with Metronic 9, do I need to buy another licensce?
Thanks
Hi,
Thank you for being a Metronic user and continuously using Metronic for your projects.
Yes, each usage of Metronic requires a new license. Purchasing separating licenses for new projects is crucial so we can have stable sales and can reinvest more into Metronic future.
We are very passionate about Metronic 9, we just released 5% of what we planned, and a ton of new features, and pre-made solutions for enterprise-grade projects are queued up.
Also you consider using Metronic Composer
tool for your Metornic 9 based projects, with a one-time payment you will get full access to our internal tool,
that we use to build and deliver the HTML features.
Regards.
Where to download Metronic 9? From downloaded files on theme forest, it is still version 8.
Hi,
Metronic 9 can be downloaded it from the themeforest.net/downloads page by entering your purchase code.
Metronic v8 for Bootstrap is still supported with new Bootstrap updates, bug fixes, and improvements.
Regards.
Please add it to the download page, we do not need to download 10GB for one demo.
Hi,
Sure, we are working on the optimization of the download package.
Regards.
Hi,
Sure, we are working on minimizing the download package size.
Regards.
Hi. Why are some native classes not working? I must be missing something
I am trying to use font-black, font-bold etc... but they are rendered as normal.
I already included 8000,900 weight to the google font, so i guess the weight are there.
Thanks
I am trying to modify tailwind.config.js, say adding a new 5xs font size, like this:
fontSize: {
'5xs': [
'0.5em', // 9px
{
lineHeight: '0.6' // 11px
}
],
'4xs': [
'0.5625rem', // 9px
{
lineHeight: '0.6875rem' // 11px
}
],.....
Rebuilding css with npm run buld:css, or npm run build or any other builds, does not include the new size into the compiled css.
What am i missing?
Is there a github version?
Yes, please get access to the private repo here and switch to the v9 branch. If you have any issues please email support@keenthemes.com and provide your purchase code with GitHub username. We will give you access manually.
is there any way to download metronic 9 without downloading whole 10gb file from themeforest?
Yea, niiice job!
Glad to hear that. Thanks a lot
Is v9 a major shift from the previous v8 where various options for deployment (NodejS, React, Angular, Vue, HTML, Et Cetera), or are those deployment options coming soon?
Thank you!
Hi,
We will provide a complete integration guide for all frameworks.
Also, we are currently working on the React/Next.js version of Metronic 9 and hopefully, we can deliver it asap.
Regards.
There's no React version yet?
Hi,
We will release it within several weeks to a few months. We are currently working on it.
Regards.
Hi Sean, How Can I Download version 9? I Can't see it at my Downloads page.
Hello,
Can you please explain the differences between Metronic 8 and 9 and what happens next with Metronic 8 / the bootstrap version?
Will the Boostrap version be discontinued or no longer developed further?
For which version is active further development and the implementation of new features taking place?
We want to convert our system to the Metronic theme and I don't know whether Metronic 8 or 9 should be used as the basis. We have more experience with Boostrap so far.
Thanks for some help with this!
Hi ,
We do continue supporting both v8 and v9. v8 is based on Bootstrap and we continue supporting it with bug fixes, improvements, and new features as per request.
Metronic v9 is a new codebase for Tailwind CSS so we will continue working on it and make it a complete solution during 2024 and 2025.
For the long run, you can consider v9 with Tailwind as this direction is not getting more demanded.
Regards
The worst part about Metronic is the upgrade process. Please focus on making a script/program for the upgrade of existing code to new major versions as its the most frustrating and laborious part of using Metronic. (eg: laravelshift.com)
Thanks.
Hi,
Appreciate your feedback.
Unfortunately, this is not an easy task since Metronic's major versions v7, v8, and v9 are completely different products and each user utilizes the Metronic code differently and its technically impossible to write a tool that automatically migrates every single buyer's code. This is a limitation due to the nature of HTML templates.
However, we will check it further do more R&D, and see how we can ease the upgrade process for v9.
Regards.
Is Dark Mode available now? I cant see it working...
How to use demo53 with tailwind?
Hi,
Thank you for your feedback.
At the moment Demo 53 is not available for the Metronic 9 Tailwind version.
In the upcoming updates, we will add new demos for the Metronic 9 Tailwind version and we will take into account your request.
Regards
