Hi,

Please note that Metronic React version comes with limited features comparing to the HTML version. All available features for each framework implementation are shown in the product preview page here. Each framework has own feature set as per advertisement.

However you can reuse the HTML version markup within your React app since the styles are globally available for all versions. You can refer to existing React features.

If you need any further help please reach our support via devs.keenthemes.com and we will guide you how you can integrate the user management

Regards, Sean

Hi ,

Thanks for your interest in Metronic.

We are working on this and its hard to give ETA. We are targeting it within Q1/2024. Would you need Tailwind/Next.js or MUI/Next.js ?At the moment we are working on MUI/Next.js.

Regards, Sean

Alright, thats a shame – would’ve loved to go ahead with your product. As per question, either work fine, they’re both big & regularly updated frameworks.

Thank you for your prompt reply though

Hi ,

Hopefully Metronic can be useful for your next projects. Stay tuned and all the best!

Regards, Sean

Hi ,

Yes, the Figma file will be included in the download package’s “design” folder. You can get it by downloading the latest Metronic zip from the ThemeForest downloads page.

Regards, Sean

I was hoping for the actual dashboard / apps layouts, do you have figma for this?

Hi,

All available features are included in our current Figma such as dashboard pages, demo layouts and some pages.

Regards, Sean

Hi,

Please note that each use of Metronic requires a separate license. So for the reselling you will need multiple licenses. For any further clarification please reach our support via support@keenthemes.com

Regards, Sean

Hi,

Thank you for the feedback. We are working on the next.js support as highlighted here: https://devs.keenthemes.com/question/metronics-roadmap-for-2024

Regards, Sean

Hi,

You can refer to Metronic docs as it uses Prismjs and you can use this plugin by including the below assets:

assets/plugins/custom/prismjs/prismjs.bundle.css

assets/plugins/custom/prismjs/prismjs.bundle.js

Then you can print the source code by using the below code(php example code):

<pre class="language-js">
<code class="language-js">
<?php echo htmlspecialchars(trim("var test='some string';"), ENT_QUOTES)?>
</code>

Regards, Sean

Hi,

Thank you for your feedback.

Yes, the example we provided comes with a server side code that is used for simulation the database based pagination. However our example code is based on static array data and is not connected to a real database. For real projects its better to design the db structure and query according to a specific requirements and use Metronic’s design and templates as frontend solution.

We invite you to join our products community at https://devs.keenthemes.com/.  There you can get assistance and guidance from KeenThemes core developers and community members.

Regards, Sean

Hi,

You will need to use SASS in “src/sass/layout/_variables.custom.scss” to edit the layout styles and then recompile your assets folder with Gulp or Webpack.

Please note that the build tools are required only in the development environment just to compile the assets when the source folder files are modified. In the hosting/server deployment, you will only need the compile assets, no need to install the build tools dependencies there.

If you need any further help please reach our support team via devs.keenthemes.com

Regards, Sean

Hi,

Please check SweetAlert plugin for popup modal and confirm box usage.

Regards, Sean

Hi,

Sure, you can use Metronic for any web app or site. However if you have paying users who you charge for accessing or using your service you will need to purchase the Extended license. If you are doing an eCommerce site then you can go with regular license. For resellable product you will need a separate license for each copy you sell.

If you need any further help please reach our support team via devs.keenthemes.com

Regards, Sean

Hi,

Thank you for reaching out to us.

To use most of our React components you need to include the following style files.

Main style file:

import './_metronic/assets/sass/style.scss'

Keenicon set styles:

import './_metronic/assets/keenicons/duotone/style.css'
import './_metronic/assets/keenicons/outline/style.css'
import './_metronic/assets/keenicons/solid/style.css'

To use our TypeScript components, wrap your app with the initialization component src/_metronic/layout/MasterInit.tsx.

For layout components, wrap your app with src/_metronic/layout/core/_LayoutProvider.tsx.

Additionally, ensure that you are using the same TypeScript configuration.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Thank you very much for your reply! I tried implementing the suggested steps, however, understandably, because there are a lot of dependencies in the project, there were too many errors to deal with. for my project I need about 10%-20% of Metronic’s functionality, but separating that functionality from the Metronic is troublesome. On the other hand, if it is not separated, there will be a big chunk of unused functionality which disregards clean code principles, and might overload the servers hosting the project. as the creator of this template, would you recommend trying to separate that 10%-20% of functionality, because it will be beneficial in the long run, or using the whole template, because it’s supposed to work alright and not overload any servers just because of it’s size?

Hi,

Sorry for the late reply.

Please note that Metronic’s features are meant to use within Metronic based app and making any feature as a standalone component is not in the scope.

However there should be a way to remove unused features as much as possible so please reach our support via devs.keenthemes.com and we will try to guide you further.

Regards, Sean

Hi,

Yes, sure. You can get Metronic v7 by downlaoding it from an external link upon purchasing Metronic. Metronic v8 uses Angular v16 while older Metronic v7 comes with an older version of Angular.

Regards, Sean

Hi,

Could you please check this as workaround. We will fix it soon.

https://devs.keenthemes.com/question/configuration0entryjswidgetsbundle-should-be-a-non-empty-array-1

Thanks

Thank you!

Hi ,

Thank you for your interest in Metronic!

Please check Checks and Radios and Advanced Form elements documentation pages.

If you enquire for further assistance or have questions, we invite you to join our products community at https://devs.keenthemes.com/. There you can get assistance and guidance from KeenThemes core developers and community members. 

Regards, Sean

Hi,

Sorry for the delayed reply and appreciate your feedback on this.

Sure, you can get the code here.

We will fix this in the docs shortly.

If you enquire for further assistance or have questions, we invite you to join our products community at https://devs.keenthemes.com/. There you can get assistance and guidance from KeenThemes core developers and community members. 

Regards, Sean

Hi ,

Thank you for your interest in Metronic.

Yes, sure. You will get Metronic Figma FIle upon your purchase in “design” if the purchased package.

If you need any further clarifications please do let us know.

Regards, Sean, KeenThemes Support

Hi,

You can use the following code on your page inside the SCRIPT tag after all the core JS files include:

// On document ready
KTUtil.onDOMContentLoaded(function() {
let input = document.querySelector("input");
let switcher = document.querySelector("#switcher");
switcher.addEventListener("click", function() {
  if (input.disabled) {
    input.disabled = false;
  } else {
    input.disabled = true;
  }
});
});

For any further help please reach our support via support@keenthemes.com

Regards, Sean

Thank you for your quick response

So how can we make it be reversed? mean by default the input will be disabled and enabled on switch it

Hi,

You can change the logic a little bit:

switcher.addEventListener("click", function() {
  if (switcher. checked) {
    input.disabled = false;
  } else {
    input.disabled = true;
  }
});

Also set “disabled” attribute for your input field.

Regards, Sean, KeenThemes Support

Hi,

Ensure that you are using the latest version of Node.js. It’s recommended to use Node.js version 18.x or later.

Try running Gulp without the—demo2 flag to see if the issue persists. For example: gulp

Make sure your package.json file includes the “type”: “module” field, like this:

{
  "type": "module",
  "dependencies": {
    // dependencies here
  }
}

Ensure that Gulp is installed globally with the latest version. You can update Gulp globally using: npm install -g gulp-cli

After making these changes, try running your Gulp task again.

Hi,

The RTL css files are generated for each demo by referring to RTL Assets guide.

If you enquire for further assistance or have questions, we invite you to join our products community at https://devs.keenthemes.com/. There you can get assistance and guidance from KeenThemes core developers and community members. 

Regards, Sean