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 (67)
Is there any date planned for the complete layout and components to be released for V9 tailwind?
Get the Waffle House Full Breakfast Menu With Prices and enjoy your favorite morning meals, from bacon and eggs to delicious Texas melts. Whether you want a light breakfast or a filling feast, Waffle House has it all. Explore the latest menu updates and prices today.
InstaPro Apk Is a customized version of the official Version of Instagram that allows user to enjoy the additional features comes with the customized version.
as Tailwindcss just released v4, is there any plan on the roadmap to update Metronic to v4?
Is there no starter code for version 9? Trying to build in React, only see the HTML and CSS
You can find some here
https://github.com/keenthemes/metronic-tailwind-html-integration/tree/main
Great! any plans for new updates for Metronic 9 with Tailwind?
Great Update. Is there any plan to support integration with Phoenix Framework and Esbuild? I saw it a while back in the documentation, but it seems it has been taken out since then.
I'm interested in the Svelte (SvelteKit) integration guide.
Maybe it would make sense to create a general integration guide which names the JS and CSS files that need to be imported in order to use Metronic, so people can make the integration them self for frameworks where there is currently no integration guide or never will be (e.g. because its a rarely used framework).
The demo of Metronic 9 looks great. I was a little deterred by the look of the Metronic 8 demos, since they are really colored and I prefer a clean, focused look. It's nice to see that Metronic 9 looks now cleaner and also uses Tailwind as base framework.
I have problem running laravel version, problems:
demo1.js:67 Uncaught ReferenceError: KTDom is not defined
at demo1.js:67:1
is there will be RTL version soon ??
Hi, is it possible to use metronic tailwind in a saas application?
When will you release more layouts/demos for tailwind?
Can I change the tailwind theme?
Best regards.
Robert
I tried to use Metronic 9 using the integeration instructions for angular, and my project is angular 17 - and it didn't work. The instructions are really vague such as "Copy the media folder from the metronic-tailwind-html package's dist/assets/media directory into your Angular project's src/assets directory. The resulting directory structure should look like this: src/assets/metronic/assets." where did the metronic directory come from ??
But regardless I've assumed I just create the directory - but when I open up the code it lights like a christmas tree such as "Property '_accordionElements' has no initializer and is not definitely assigned in the constructor.ts(2564)"
The documentation really needs to be updated/improved - imho.
When will the Angular version of v9.x be released.
In the meantime, there is only an angular integration guide that explains how existing HTML pages can be used within an angular application.
I'm looking forward to the release of the AdonisJS version.
Outstanding job by the KeenThemes team on Metronic 9! Can't wait for all the "Coming Soon" features but can't believe how much you all released in a v1.0 initial release! Thanks for always putting out quality work and making the process of creating amazing webapp dashboards easier!
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.
I wanted to have code for the ReactJS and NExtJS the below help from u
1. RTL codes
2. Demo1 to Demo10 or any other Demo how we change where this is explained and what are the codes
3. How can we take some Grid Tables straight into our form generator so using them we can build our Grid. is there any example in react would be a great help
4. Just Curious Tailwind can I take source code cut and paste as it is
kindly please message me back in johar@writeme.com
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
