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,693 sales
Recently Updated
Well Documented

keenthemes supports this item

Supported

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

12202 comments found.

Hi,

When will you complete which HTML components for React? May I know the components that you will never complete?

Hi :),

Thanks for your interest in Metronic!

Except jQuery plugins all static(HTML/SASS) and in-house(HTML/SASS/Typescript) components can be reused in React version. Please let us know your interested components and we will provide you more info.

For any further clarifications you can contact our support directly via support@keenthemes.com

Regards, Sean

Then will the following be added? Will it be added?

Metronic 8 (Bootstrap 5) React
  • Demo 2 – SaaS
  • Modals – Wizards
  • Apps – Calendar

Hi,

1) Demo2 should be available within the next Metronic 8 update.

2) Modals -> Wizards pages will took some time to finish we already have CreateAppModal, you can make others by referring to this existing modal and reuse html code from our html version.

Check file: demo1/src/app/pages/dashboard/_modals/create-app-stepper/CreateAppModal.tsx

3)Just created a task for full calendar integration, it should be ready and released during the few weeks.

Regards,
Lauris

I am not able to find nestable page

Hi :),

Thanks for your interest in Metronic.

The nestable plugin is no longer supported by the authors: We will check further and try to find a replacement.

Stay tuned for updates via https://twitter.com/keenthemes and https://www.instagram.com/keenthemes

Regards, Sean

How do I remove a modal by ts in vuejs?

Hi,

You can remove modal in your ts code using this example:

import bootstrap from "bootstrap/dist/js/bootstrap.min.js";

const myModal = new bootstrap.Modal(document.getElementById('myModal'))
myModal.hide()

Check official bootstrap 5 doc for more info.

Regards,
Lauris

Hello I have a modal loaded with livewire. But my js componant doesn’t load correctly in this modal. (Select2…) I guess i need to realod the javascript of the webpage to enable all js componant of this modal. But how can I do that ?

Hi :),

Thanks for your interest in Metronic and sorry for the late reply.

If you are using the HTML version of the theme please note that all components and 3rd-party plugins are initialized after page load automatically. This is how the classic pages work. For Metronic 8, to reinitialize all the stuff you will need to follow the below steps:

1) Reinitialize some most used components(Tooltip, Popover, Select2):

KTApp.init();

2) Reinitialize in-house components:

KTMenu.createInstances();
KTDrawer.cteateInstances();
KTSwapper.cteateInstances();
You can check other plugins and call their reinitialization methods accordingly: https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started.html

if you need any further help please contact our support via support@keenthemes.com

Regards, Sean

I am using version 5.0.20. I want to know if the form validation plugin that was in version 4.0 is no longer provided. Will you support me later?

Hi :),

The previouse form validation plugin is no longer supported by the authors. Currently we use Premium FormValidation plugin https://preview.keenthemes.com/metronic8/demo1/documentation/forms/formvalidation/basic.html which is very powerful and extendable.

For any further clarifications please contact our support via support@keenthemes.com

Regards, Sean

hi dear,

why option of dark/light theme is not in page builder ? hope you can add it in builder options this will be great

also how can we see dark theme in rtl?

also option to search main menu (aside) items?

also dark mode for landing page?

thanks

Hi :),

Thanks for your interest in Metronic.

The layout builder is used for HTML manipulation only.

The Dark Mode requires special setup as explained here https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/dark-mode.html

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

Regards, Sean

Hi keenthemes,

As we needed some non copyright photo for persons to demo for our client, We found a great ressource on the net for that, and they are AI generated photo for all ages and gender …. and they are free of use even for commercial use.

As Metronic use persons pictures, We thought You could be interesting on, here’s the link : https://generated.photos/faces

Hope you find it usefull,

Thank you

Hi :),

Thanks for sharing this. We will check it out.

Regards, Sean

Hi :),

Thanks for your interest in Metronic. We are working on the pending demos and Demo 7 should be out soon.

Stay tuned for updates via https://twitter.com/keenthemes and https://www.instagram.com/keenthemes

Regards, Sean

Hi, when do you estimate Demo 7 – Trendy Dashboard for Bootstrap 5 to complete?

Please check metronic 8 landing page, sidebar items are not clickable and does not work after we scroll down.

Hi :),

Good spot! It seems the issue is on mobile mode. You can quickly fix it by replacing the below HTML attributes in landing HTML code:

data-kt-place

to

data-kt-swapper

We will release this fix in the next update.

Regards, Sean

Thank you so much . It is working now.

Thank you too for your quick feedback :)

Hi, is there any documentation on how to do the HTML + Laravel (Metronic 7)? The one that i found is Vue + Laravel Integration.

Ok, already found the solution. thank you for your awesome template.

Glad to hear that :) All the best with your projects!

Hi kenethemes,

It would be a great step when you release some new features, not just include it in documentation, but also in Demo as HTML page layout or whatever you call it, just to see and have an idea how it perform.

NB : Many times, we were able to include features just by seeing it in metronic, but in documentation was little bit chalenging..

thank you.

for example I tried to implement Toaster, I was little confusing !..

But if it was in a page in Metronic8, I could see how thing are done from the loading to the show (all the process).

I know that the doc can lead you to accomplish everything but .. I’m like majority and everybody else on the net, “Learning by example”. LoL

Thank you

Hi :),

Thanks for the suggestion. We will add real world examples, such as apps and pages to showcase those features that we added into the documentation.

Regards, Sean

Appreciate all these updates. Would you be able to point me in the right direction for the dark switch on demo 2? Thanks :)

Hi :),

You can refer to the Dark Mode setup documentation here https://preview.keenthemes.com/metronic8/demo2/documentation/getting-started/dark-mode.html

If you need any further help please contact our support at support@keenthemes.com

Regards, Sean

Hello, the html version seems to be the main version of the theme.

The react version has all the components of the html version?

I am codding in react. I saw the demo 1 of the react version and the are a lot of pages and components missing comparing with the demo 1 of the html version. Thanks

Hi :),

Thanks for your interest in our theme Metronic.

The HTML version is the base version and it mostly uses jQuery plugins. However all non-jquery code from the HTML version can be reused in the React version. We will add more feature to the React version in upcoming updates.

Stay tuned for updates via https://twitter.com/keenthemes and https://www.instagram.com/keenthemes

Regards, Sean

Hi, Your Vue3 template in Metronic8 was released as some of the first along with the html version – The React template was released some time later, and yet the vue template seems much more incomplete than the React version? No menu bar, no aside, no header, no toolbar.. not much, really? How come the Vue version was left half done while the react version seems more complete?

Hi :),

Thanks for your interest in Metronic. Metronic v8 Vue complete and even has more features comparing to the React version. Please check all available versions here and compare: https://keenthemes.com/metronic/

The latest Vue version you can check here https://preview.keenthemes.com/metronic8/vue/demo1/

If you need any further clarifications please contact our support via support@keenthemes.com

Regards, Sean

Hi, I am trying to integrate the html template into a Nuxt app.. I can get the css working perfectly, but it’s like the KT functions won’t really react to anything.. Do they need to be initialized in a special way? I just included the dist assets in the loading of the layout and added the body class / id to the html. Thanks alot :-)

Hi :),

Thanks for your interest in Metronic. Metronic does not support Nuxt at the moment.

Basically all core components and function should be initialized after their HTML referenced elements are populated. For example KTApp.init() initializes the global components such as tooltips, popovers, etc. The all in-house components such as KTMenu, KTDrawer, etc should be initialized as well:

KTMenu.createInstances();
KTDrawer.createInstances();
For more info please refer to the documentation: https://preview.keenthemes.com/metronic8/demo1/documentation/general/menu.html

Regards, Sean


Hey :)

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

1. HTML Demo 2 Dark Mode:
– Skin Switch.
– Layout.
– Pages.
– UI Elements.
– 3rd Party Plugins.
– In-house Components.
– Widgets.
– Layout Builder.
– Documentation.

2. HTML Plugins:
– BlockUI.
– FormValidation.
– FlotCharts.
– Google Charts.

3. Laravel:
– Demo 1 Dark Mode.
– Demo 3 Integration.
- Webpack Mix Improvements.
– Docs Improvements.

4. Vue:
– Laravel Integration Docs.
– Demo 1 Dark Mode Docs.
– i18n Setup Docs.
– Docs Improvements.

5. React:
– Demo 1 Dark Mode Docs.
– Docs Improvements.

Next Up:

1. Laravel:
– CRUD Solution.
– 2 Steps Authentication.
– Application Settings.
– Integrated Charts.

2. More:
– Demo 7 HTML.
– Demo 8 HTML.
– Demo 9 HTML.
– Demo 10 HTML.
– Demo 2 Vue.
– Demo 2 React.
– Demo 1 Angular.

Stay tuned on endless updates to empower your projects.

All updates are free, always!

Regards, Sean

Hello! how can I add color indigo to the theme so I can use the variations indigo-400, indigo-600 and indigo-800?

Hi :),

You can use those extended colors as per the Bootstrap documentation https://getbootstrap.com/docs/5.0/customize/color/ but

Metronic refers to the theme colors only(primary, success, etc).

Regards, Sean

Where and how should I initialize KTApp.init(); and KTMenu.createInstances(‘[data-kt-menu=”true”]’); if i’m using the HTML version with angular 11? Thanks!

Hi :),

Thanks for your interest in Metronic.

Basically for SPA all those instance creation should be placed right after the HTML code population.

We are now working on Metronic v8 Angular version and it should be out in a few weeks. Integration Metronic with Angular integration requires a huge work and we would recommend you to wait for the official Angular release.

Regards, Sean

Why did you stop developing the Android versions of the theme? I am still waiting Metronic Version 7 Demo 6 and 10 Angular versions and you decommissioned the Version 7 and released Version 8 with 0 angular versions – why so? You are selling your product as Angular 11 included – but there is 0 angular versions for the Metronic 8. “Metronic – Bootstrap 4/5 HTML, VueJS, React, Angular 11 & Laravel Admin Dashboard Theme” – since you decommissioned Angular and React please remove them from the name…. and rename it to “Metronic – Bootstrap HTML, Laravel Dashboard Theme”

Hi,

We are working on it with a high priority and we will do our best to release Metronic 8 with Angular 12 within August with lots of enhancement, such as, performance improvements, typescript support, layout optimizations, ready to use AUTH flow implementation with real REST API, native core plugins, etc.

Stay tuned for updates via https://twitter.com/keenthemes and https://www.instagram.com/keenthemes

Regards, Sean

Hi,

your previous reply was on16th of September 2020 “Right now we have implemented only demo1+Angular9 and demo1+Angular10+Ivy versions. Other demos (2, 3, 4) will be implemented and released in October. Please follow us at http://twitter.com/keenthemes to stay updated. Regards, Keenthemes support” still waiting…....

Hi,

We were referring to Metronic 8 Bootstrap 5 + Angular 8 version. As core frameworks and libraries having major updates sometimes it’s hard to catchup with the demo integration but with Metronic 8 we will try to provide as more demos as possible. Thanks for your understanding.

Regards, Sean

All the components and pages are React Ready using Hooks?

Hi,

Yes in Metronic 8 react version components are written using Hooks.

Regards,
Lauris

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