Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

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 (67)


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.



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

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


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  :(