Discussion on Metronic | Tailwind, Bootstrap, React, Next.js, Vue, Angular, Laravel Admin Dashboard HTML Template

Discussion on Metronic | Tailwind, Bootstrap, React, Next.js, Vue, Angular, Laravel Admin Dashboard HTML Template

Cart 119,667 sales
Recently Updated
Well Documented

keenthemes supports this item

Supported

This author's response time can be up to 1 business day.

12201 comments found.


Hey :),

We have been working on some amazing stuff and shortly we will be releasing:

1. HTML Version:
– eCommerce dashboard.
– Store Analytics Dashboard.
– Logistics Dashboard.
– Delivery Dashboard.
– Marketing Dashboard.
– Social Dashboard.
– Theme Mode Menu.
– Custom Font Icons.
– Select2 RTL Improvements.
– Layout Builder Improvements.

2. HTML eCommerce App:
– Orders Listing.
– Order Details.
– Products CRUD.
– Add Order.
– Edit Order.

3. Vue Version:
– Dark Mode Improvements.
– Layout Improvements.
– Docs Improvements.

4. React Version:
– Access Token Improvements.
– Layout Improvements.
– Docs Improvements.

5. Angular Version:
– Engage Panel.
– Dark Mode Improvements.
– Docs Improvements.

6. Laravel Version:
– Engage Panel.
– Layout Improvements.
– Docs Improvements.
– Assets Optimization.

Next Up:
– Demo 21 HTML.
– Demo 22 HTML.
– Demo 23 HTML.
– Demo 24 HTML.
– Demo 25 HTML.
– Demo 3 Vue.
– Demo 4 Vue.
– Demo 5 Vue.
– Demo 3 React.
– Demo 4 React.
– Demo 5 React.
– Demo 2 Angular.
– Demo 3 Angular.
– Demo 4 Angular.
– Demo 5 Angular.
– Demo 11 Laravel.
– Demo 12 Laravel.
– Demo 13 Laravel.
– Demo 14 Laravel.
– Demo 15 Laravel.
– React CRUD Solution.
– Angular CRUD Solution.

Stay tuned for endless updates to empower your projects.

All updates are free, always!

Regards, Sean

Can we have separate template download options i use only react so for each new version i should download all template more then 3gb

Hi,

Thanks for your interest in Metronic.

Yes, we are working on it and soon we will prepare a page to allow download selected framework package and demos/

If you require further assistance, please create a ticket using the link below. KeenThemes will help you out.

Click Here to Get Metronic Support

Regards, Sean

Hi,

https://preview.keenthemes.com/metronic8/demo5/index.html

“LEFT MENU” is used as mobile menu in Demo3. Dashboard, Crafted, Apps, Resources, From where will Mega Menu be opened when connected with Mobile?

https://content.screencast.com/users/depoexcel/folders/Snagit/media/036f334e-c780-4175-9a03-2855c8b8a898/12.27.2021-23.32.png

Hi :),

Happy 2022. Yes, we have fixed the issue in the latest update: https://preview.keenthemes.com/metronic8/demo5/index.html

Feel free to ask if you need any further clarifications.

Regards, Sean

Hi,

Thanks for your quick action. However, I wish that the main menu at the top was on the left rather than on the right.I think if it was that way it would be better .

Thanks,

Hi,

Sure, we will consider this in the next update.

You can also customize the mobile header menu toggle buttons easily in the HTML level. we can guide you on this.

If you require further assistance, please create a ticket using the link below. KeenThemes will help you out.

Click Here to Get Metronic Support

Regards, Sean

Hello keenthemes! any plans on adding new icons for the duotune medicine group? like a patient, patients, ambulance, sirens, etc..? thank you

Hi :),

Thanks for your suggestion. Noted and we will consider this in a future update.

Regards, Sean

Hey, I’ve purchased & Download Metronic Theme at 5April 2021, Now I need that sepcific version, from where i can download that?

Hey I tried to find out but didn’t find it, I am saying I’ve download at 5 April 2021 now Please tell me what is the tag number so I can directly go to there.

I’ve downloaded the one tag version & When i try to extract it saying … Unable to expand “Metronic-7.2.4.zip” into Downloads. Error -1 Undefined error 0

Hi,

Sorry for inconvinence. So far it worked well. Looks like github having some issues. We will prepare the seperate download URL link for the stable Metronic v7 and email you shortly.

Regards Sean

Dear community, welcome Devs Forum

We’ve been long wishing to build a bridge between us and the Metronic community. As the ThemeForest comments section only allows limited room for conversation, we kindly invite you to collaborate with Metronic developers from everywhere on Devs Forum. 

Click Here to Get Metronic Support

Best regards, Bob

In layout #19 I would like to insert a button in the navbar, but when I click on it, it doesn’t take me to the link…. In the demo there are only dropdown menu.

I’ve tried:

<div data-kt-menu-trigger="click" data-kt-menu-placement="bottom-start" class="menu-item menu-lg-down-accordion me-lg-1"> <span class="menu-link py-3"> <a href="{{route('login')}}"><span class="menu-title">{{ __('Login') }}</span></a> </span> </div>

How can I insert a menu link in the header, without it being a dropdown?

Solved, the fault is data-kt-menu-trigger=”click”

Hi :),

Great! Glad to hear that.

If you require further assistance, please create a ticket using the link below. KeenThemes will help you out.

Click Here to Get Metronic Support

Regards, Sean

Horrible Modal coding, cant execute a way to save details to a database without totally disabling the form verification coding.

Hi,

The code quality is not that bad, it just requires some time in order to get used to it. Metronic comes packed with a complete solution and users decide which part to use or disable.

May we could help you out. Could you please explain your issue with more details ? Which modal example you are referring to ?

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

I have bought your product.

I am trying to install it in an existing Laravel project.

I am following the instructions from https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/integration/laravel.html

I have the following errors when running ‘npm run dev’:

WARNING in ./node_modules/handlebars/lib/index.js 22: 38-56 require.extensions is not supported by webpack. Use a loader instead.

WARNING in ./node_modules/handlebars/lib/index.js 23: 2-20 require.extensions is not supported by webpack. Use a loader instead.

WARNING in ./node_modules/handlebars/lib/index.js 24: 2-20 require.extensions is not supported by webpack. Use a loader instead.

ERROR in ./node_modules/handlebars/lib/index.js 17: 11-24 Module not found: Error: Can’t resolve ‘fs’ in ’<PROJECT> / node_modules / handlebars / lib’

webpack compiled with 1 error and 3 warnings

Could you help?

In the documentation I think you also need to comment that you have to rename scripts.demoX.js by scripts.js

All the best,

Hi,

The error seems there is an issue with handlebars. Could you please try to import handlebars?

var Handlebars = require(‘handlebars/dist/cjs/handlebars’);

Thanks

In the vis-timeline.js file I have changed window.Handlebars = require (“handlebars”); for window.Handlebars = require (“handlebars / dist / cjs / handlebars”); and now it does not give problems

It’s well done?

Hi,

It should work with no problem. Some other plugins also import by full js file path.

Thanks

Hi, are there plans to add a draggable cards or Kanban demo to Metronic 8?

Hi :),

Thanks for your interest in Metronic.

We have both:

https://preview.keenthemes.com/metronic8/demo1/documentation/general/draggable/cards.html https://preview.keenthemes.com/metronic8/demo1/documentation/general/jkanban/basic.html

If you require further assistance, please create a ticket using the link below. KeenThemes will help you out.

Click Here to Get Metronic Support

Regards, Sean

Is there some example of date time picker in Angular project?

Hi :),

Thanks for your interest in Metronic.

You can refer to the Angular Material integration here https://preview.keenthemes.com/metronic8/angular/docs/angular-material/overview And use any Angular Material component from https://material.angular.io/ including the pickers: https://material.angular.io/

If you require further assistance, please create a ticket using the link below. KeenThemes will help you out.

Click Here to Get Metronic Support

Regards, Sean

Hi @keenthemes

Please I need help ,Tooltip does not work in Recat version https://imgur.com/QzcQUAx

Thanks

Hi,

In React version tooltip in this place is not added.
You can use react-bootstrap tooltips.
Please check react-bootstrap official doc.

If you require further assistance, please create a ticket using the link below. KeenThemes will help you out.

Click Here to Get Metronic Support

Regards,
Lauris

Hi @keenthemes,

I just try and extract the zip file. There are many demo inside, i see every demo have own asset css and js folder, but it’s look same size. Is the style.bundle.css is same file for all demo ? Or every style.bundle.css is different ?

Thanks

Hi,

Thanks for your interest in Metronic.

The style.bundle.css and plugins.bundle.css files sizes are almost similar but they are different since each demo has different theme colors, style settings, such as global border radius, box shadow and font family.

If you require further assistance, please create a ticket using the link below. KeenThemes will help you out.

Click Here to Get Metronic Support

Regards, Sean


Dear community, welcome Devs Forum!

We’ve been long wishing to build a bridge between us and the Metronic community. As the ThemeForest comments section only allows limited room for conversation, we kindly invite you to collaborate with Metronic developers from everywhere on Devs Forum.

Click Here to Get Metronic Support

Best regards,
Bob

We need support for RTL version for Angular, we already added RTL style css file.

How to switch between 2 languages English (LTR) and Arabic(RTL) ?

Hi,

Could you please try to add rtl attributes in the HTML tag?

<html direction="rtl" dir="rtl" style="direction: rtl">

As the ThemeForest comments section is meant only for pre-sale questions and general inquiries, we have launched a centralized support forum for Metronic customers. Please create a support ticket using the link below: 

Click Here to Get Metronic Support

Thanks

Hi author, I want to ask that do you have any plan to remove all jQuery dependencies in HTML themes.??
I want to buy this theme but without jQuery dependency.
I have checked and found that you are using Select2.JS which is based on jQuery
However you can use Choices.JS whose functionality is exactly like the Select2.JS but written in javascript
Here is the link of Choices.JS
https://github.com/Choices-js/Choices
I also want to ask you when you will add ReactJs demo for version 8 theme?

Hi,

Thanks for your interest in Metronic.

You can check our documentation to remove jQuery plugins: https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/customization/no-jquery.html

Those jquery plugins are optional and the core of Metronic does not depend on jQuery.

If you require further assistance, please create a ticket using the link below. KeenThemes will help you out.

Click Here to Get Metronic Support

Regards, Sean

hello , i am working on metronic 8 demo 1 angular , ngFor not working properly , i simply put this *ngFor=”let hero of LanguageList”{{hero.name}} in li tag in login component and initialize this by public LanguageList = [ { “id”: 3, “name”: “french” }] and with the of help of settimeout change value code is setTimeout(() => { debugger let a = [ { “id”: 1, “name”: “urdu” }, { “id”: 2, “name”: “english” } ] this.LanguageList.push( { “id”: 1, “name”: “urdu” }, { “id”: 2, “name”: “english” }) console.log(“lang” , this.LanguageList) }, 4000); but this not reflect on my view , in console it update , can you please guide me what the problem , i google it alot but not get the answer

HI,

We used onPush change detection strategy for performance. You can disable this by removing changeDetection: ChangeDetectionStrategy.OnPush.

Or you can use below code to manually update the UI render.

  constructor(private cd: ChangeDetectorRef) {}
  refresh() {
    this.cd.detectChanges();
  }
https://www.digitalocean.com/community/tutorials/angular-change-detection-strategy

Thanks

Hi :),

As the ThemeForest comments section is meant only for pre-sale questions and general inquiries, we have launched a centralized support forum for Metronic customers. Please create a support ticket using the link below: 

Click Here to Get Metronic Support

Best regards, Sean

It looks like that part needs an update.

ERROR in ./resources/ts/src/Landing.vue?vue&type=style&index=0&id=50c210f4&lang=css (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use1\\./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use2\\./resources/ts/src/Landing.vue?vue&type=style&index=0&id=50c210f4&lang=css) Module build failed (from ./node_modules/css-loader/dist/cjs.js): Error: Can’t resolve ‘assets/porto/css/theme.css’ in ’/home/www/php/laravel/main/resources/ts/src’ at finishWithoutResolve (/home/www/php/laravel/main/node_modules/enhanced-resolve/lib/Resolver.js:293:18) at /home/www/php/laravel/main/node_modules/enhanced-resolve/lib/Resolver.js:362:15 at /home/www/php/laravel/main/node_modules/enhanced-resolve/lib/Resolver.js:410:5 at eval (eval at create (/home/www/php/laravel/main/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1) at /home/www/php/laravel/main/node_modules/enhanced-resolve/lib/Resolver.js:410:5 at eval (eval at create (/home/www/php/laravel/main/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1) at /home/www/php/laravel/main/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:87:43 at /home/www/php/laravel/main/node_modules/enhanced-resolve/lib/Resolver.js:410:5 at eval (eval at create (/home/www/php/laravel/main/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1) at /home/www/php/laravel/main/node_modules/enhanced-resolve/lib/Resolver.js:410:5

ERROR in ./resources/ts/src/App.vue?vue&type=style&index=0&id=ccae3304&lang=scss (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-13.use1\\./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-13.use2\\./node_modules/vue-loader/dist/index.js??ruleSet0.use0!./resources/ts/src/App.vue?vue&type=style&index=0&id=ccae3304&lang=scss) Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Undefined operation “50px * divide(3, 2)”. ╷ 33 │ width: $size * divide(3, 2); │ ^^^^^^^^^^ ╵ resources/ts/src/assets/sass/core/components/mixins/_symbol.scss 33:21 symbol-size() resources/ts/src/assets/sass/core/components/_symbol.scss 63:5 @import resources/ts/src/assets/sass/core/components/components.scss 68:9 @import resources/ts/src/assets/sass/style.scss 12:9 @import resources/ts/src/App.vue 43:9 root stylesheet

webpack compiled with 2 errors

Yes. I followed the workbook guide. The error is:

LOG from ./node_modules/sass-loader/dist/cjs.js sass-loader ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use1\\./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use2\\./node_modules/vue-loader/dist/index.js??ruleSet0.use0!./resources/ts/src/App.vue?vue&type=style&index=0&id=ccae3304&lang=scss <w> Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. <w> <w> Recommendation: math.div($input-padding-y, 2) or calc($input-padding-y / 2) <w> <w> More info and automated migrator: https://sass-lang.com/d/slash-div <w> <w> node_modules/bootstrap/scss/_variables.scss 720:73 @import <w> resources/ts/src/assets/sass/_init.scss 18:9 @import <w> resources/ts/src/assets/sass/plugins.scss 13:9 @import <w> resources/ts/src/App.vue 42:9 root stylesheet <w> <w> Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. <w> <w> Recommendation: math.div($spacer, 2) or calc($spacer / 2) <w> <w> More info and automated migrator: https://sass-lang.com/d/slash-div <w> <w> node_modules/bootstrap/scss/_variables.scss 942:37 @import <w> resources/ts/src/assets/sass/_init.scss 18:9 @import <w> resources/ts/src/assets/sass/plugins.scss 13:9 @import <w> resources/ts/src/App.vue 42:9 root stylesheet <w> <w> Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. <w> <w> Recommendation: math.div($nav-link-height – $navbar-brand-height, 2) or calc(($nav-link-height – $navbar-brand-height) / 2) <w> <w> More info and automated migrator: https://sass-lang.com/d/slash-div <w> <w> node_modules/bootstrap/scss/_variables.scss 951:37 @import <w> resources/ts/src/assets/sass/_init.scss 18:9 @import <w> resources/ts/src/assets/sass/plugins.scss 13:9 @import <w> resources/ts/src/App.vue 42:9 root stylesheet <w> <w> Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. <w> <w> Recommendation: math.div($spacer, 2) or calc($spacer / 2) <w> <w> More info and automated migrator: https://sass-lang.com/d/slash-div <w> <w> node_modules/bootstrap/scss/_variables.scss 1001:37 @import <w> resources/ts/src/assets/sass/_init.scss 18:9 @import <w> resources/ts/src/assets/sass/plugins.scss 13:9 @import <w> resources/ts/src/App.vue 42:9 root stylesheet <w> <w> Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. <w> <w> Recommendation: math.div($spacer, 4) or calc($spacer / 4) <w> <w> More info and automated migrator: https://sass-lang.com/d/slash-div <w> <w> node_modules/bootstrap/scss/_variables.scss 1013:37 @import <w> resources/ts/src/assets/sass/_init.scss 18:9 @import <w> resources/ts/src/assets/sass/plugins.scss 13:9 @import <w> resources/ts/src/App.vue 42:9 root stylesheet <w>

ERROR in ./resources/ts/src/router/index.ts 31:11-34 Module not found: Error: Can’t resolve ’@/Landing.vue’ in ’/home/www/php/laravel/main/resources/ts/src/router’

ERROR in ./resources/ts/src/App.vue?vue&type=style&index=0&id=ccae3304&lang=scss (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use1\\./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use2\\./node_modules/vue-loader/dist/index.js??ruleSet0.use0!./resources/ts/src/App.vue?vue&type=style&index=0&id=ccae3304&lang=scss) Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Undefined operation “50px * divide(3, 2)”. ╷ 33 │ width: $size * divide(3, 2); │ ^^^^^^^^^^ ╵ resources/ts/src/assets/sass/core/components/mixins/_symbol.scss 33:21 symbol-size() resources/ts/src/assets/sass/core/components/_symbol.scss 63:5 @import resources/ts/src/assets/sass/core/components/components.scss 68:9 @import resources/ts/src/assets/sass/style.scss 12:9 @import resources/ts/src/App.vue 43:9 root stylesheet

webpack compiled with 2 errors

Is there a way to use sass without migration?

Hi,

By default, we do not have @/Landing.vue component in our theme, if you added it by yourself so please make sure that file is created and imported correctly.

Yes, you can use sass files separately. Just bundle them with webpack and connect to your HTML files.

If you enquire 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,
Lauris

To whom it may concern – it’s an awful experience. The zip file for this theme is 3.7GB. I have 18GB free and the archive can not be extracted. It’s an awful waste of time and resources. It could have been better.

Hi,

Thanks for your feedback. To quickly unpack the package you can use https://www.7-zip.org/ software. You can use only required sub package or demo and remove other parts.

You can also clone the entire package via GitHub. To do so please provide your GitHub username via support@keenthemes.com and we will grant you access.

As our package growing with new demos, apps and components we are planning enable an online download page for Metronic package which allows our buyers to download selected sub package and demo at their convinces.

Regards, Sean

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve ThemeForest.

Sure, take me to the survey