Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

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!

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (51)


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.



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

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?



Hi,

You can use Axios plugin which is already included in the core bundle of Metronic v9.

Regards.



how to use it, in html?



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



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.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(