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,698 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.

Hello,

Is there any figma/invision version or something similar? I noticed you say you do have a figma version but I can’t find anything about it.

Thank you

Hi :),

Thanks for your interest in our theme – Metronic.

The Figma file is available for Metronic v7 and you can find it in the download package and for Metronic 8 we will release the Figma file soon.

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

Regards, Sean

Hey :),

Check out our new video about Metromic v8 file structure: https://www.youtube.com/watch?v=wQz8c2A7-sI&ab_channel=KeenThemes

More to come!

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

Regards, Sean

Hi,

I try ‘npm run build—prod—demo1’, but it doesn’t minimize js and css. But it does using ‘gulp—prod—demo1’.

Hi,

Thank you for your sharing. We will check it. May I know your node.js version? and your OS. So we can take note of this.

Thanks

Nodejs v14.17.3 OS : Windows 10

Thank you. We have included the fix in the recent updates.

Hi keenthemes,

IT’s been now 3 days trying to download the latest Metronic8(since it has the so waited demo6) but without any luck !!!???

1 – The file is huge..

2 – The download cut always somewhere (10%, 80%, 50% ...) never finish

3 – It’s not really the Size, but if it was like a .torrent and has even 20GB it will be OK, but with Metronic8 if it cut, there’s no RESUME… :(

I think that you have to downsize the size of Metronic8 by decoupling it from Metronic7.(Ship Metronic7 and Metronic8 separetly).

Is there another way to get Metronic (.torrent, ftp, ...)

Thank you guys.

Hi :),

We will separate v7 once v8 is complete and all v7 features are ported. You can get it from our Github repo. Please send your github username to our support via support@keenthemes.com

You can also try to use our Github registration form here https://keenthemes.com/metronic/?page=github

Regards, Sean

Is there no metronic_v8 laravel8 vue3 integration guide?

Hi :),

Thanks for your interest in Metronic.

We are working on this and it should be available soon. If you need some directions please contact our support via support@keenthemes.com and we will try to show some directions.

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

Regards, Sean

metronic_v8 laravel and vue integration supported? metronic_v7 integrates well with laravel and vue, is there any guide on metronic_v8 laravel vue integration? Too many errors.

Hi :),

Thanks for your interest in Metronic.

Can you please contact our support and provide us more details? The steps you took and what error you got.

Regards, Sean

Hi,

congrats, I’m really happy about the release of the dark skin. :-)

But unfortunately

gulp --dark-skin --demo5

and the other steps at https://preview.keenthemes.com/metronic8/demo1/dark/documentation/getting-started/dark-skin.html don’t work, it doesn’t generate a dark skin for “Demo5”, only for “Demo1”.

How to fix that?

Best regards, keep up the high update frequency please! :-)

Hi :),

The dark skin for demo5 will be released in the next update. At the moment only Demo 1 supports the dark skin.

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

Regards, Sean

Can I use the template for Codeigniter software project?

Hi :),

Thanks for your interest in Metronic.

We have Laravel version of Metronic that you can preview here https://keenthemes.com/metronic/?page=metronic8

For Codeigniter we will add integration documentation soon. At the moment you may try to refer our Laravel version and integrate the same for Codeigniter. You can also refer to our webpack build docs: https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/build/webpack.html

Regards, Sean

There is an issue on https://preview.keenthemes.com/metronic/demo1/index.html

Demo 1 layout builder,

Its continuously spinning the page, I have refreshed & back the page, But still spinning

Hi,

This is the layout builder url page; https://preview.keenthemes.com/metronic/demo1/builder.html

Could you please clarify the issue? Do you mean it spinning after you clicked “export”?

How long did wait after you clicked “export”? It should take some time before the zip starts to download.

Thanks

Hi, How to find ‘sample blank page’ for metronic8 ?

Hi,

We would suggest using the layout builder https://preview.keenthemes.com/metronic8/demo1/layout-builder.html for server-side integration. This video explains it https://www.youtube.com/watch?v=ptgwzvvAHy4&ab_channel=KeenThemes. The video is made for v7 but can be applied to v8 as well.

To create a blank page template you can get the index.html and cleanup the content part in the HTML.

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

Regards, Sean

Hi, I want to know the release date of the V8 Demo3 for Angular. or If I purchase metronic theme now will I be able to use the Demo3 for Angular beta or something?

Hi :),

Thanks for your interest in Metronic. We are working on it and we will do our best to release it in early August.

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

Regards, Sean

Are you sure you did include the dark mode in the 8.0.18 build? Running “gulp localhost—demo1” generates a demo that redirects to non-existing url: http://localhost:8080/demo1/dist/index.html :cry:

Hi :),

Please refer to https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/dark-skin.html to setup the dark skin for Demo 1.

Regards, Sean

Hi keenthemes,

Can you please add the Quick action as off canevas as showed you above (it like in a rush, LoL) ; https://ibb.co/QMHkv8d

Thank’s for the demo6 by the way. and the Dark theme is sick guys, it’s Amazing, I’ve never thought that it would be great looking, I even start to think of giving it as a option to our project, LoL

thank you.

Can you also add, setting, Logs, .. as a off canevas, it is a great way to have much setting and parameters in such a smal place, it has a great UX way of doing things.

this is taken from the Metronic7 page.

here the example : https://ibb.co/bXr81d8

We sure can make it, but we make sure that it has to be in the proper way, like the author (keenthemes) way… we wouldn’t miss something or have an inproper html js code

Thank you,

Thank you so much guys.

Hi :),

Sure, we will consider that as well. Thanks for your feedback on this.

Regards, Sean

Thank you Sean

Hello! when I use the HTML version and I try to work it with angular, everything works fine at the beginning, but then it loads the view with lazyload and the menus don’t work, just like any window that uses data-kt-menu-trigger is this why?

Hi :),

You can call to initialize pending KTmenu instance:
KTMenu.createInstances('[data-kt-menu="true"]');

To init other BS components(tooltip, popover, etc) and other wrappers you will need to call:

KTApp.init();

If you need any further clarifications please let us know.

Regards, Sean

Thank you! It helped me. For other features such as displaying the password or hiding the menu, what should I initialize?

Hi :),

Glad to hear that! You can use the same method:

KTPasswordMeter.createInstances('[data-kt-password-meter="true"]')

In the next update we will update our documentation with this info.

Regards, Sean

Hello! tables doesn’t work inside modals, it doesn’t render any of the normal classes like table-striped, table-hover, table-row-bordered etc.. is this a bug?

Hi :),

In our official Laravel version you can see working Datatable examples here https://preview.keenthemes.com/metronic8/laravel/log/system

Our Datatable integration fully supports the base Bootstrap table classes. Can you please try it as it’s already working in the official Laravel version.

Regards, Sean

Hello, I am using your Metronic 8.0.16 Laravel and is not working properly

Can you please update to the latest Metronic v8.0.18 ? The ajax data tables were released in the recent version.

Hello! when does the angular dark version of the demo 5 v8 come out?

Hi :),

We are working on it and it should be out soon.

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

Regards, Sean

Hi :),

Just in case if you haven’t seen it yet, we are delighted to inform you that Metronic finally has its complete dark mode version. You can check the dark mode preview here https://preview.keenthemes.com/metronic8/demo1/dark/index.html

Regards, Sean

Hi keenthemes,

Since Metronic8 is based on Bootstrap5, Are those colors available in Metronic8 as Bootstrap5 has them already in their page ????

If not,,how we can implement them,

like the way of defining yellow, and after using the yellow palette as : yellow-300

It is a great thing to have a multitude /exhaustive choices palette collor liste, not just few (8 colors).

Thank you guys

Hi :),

Thanks for your suggestion.

The Bootstrap 5’s color library is available as its’ shown in the Bootstrap 5 documentation. However our custom components are integrated only with the base theme colors(the state colors such as success, primary, danger, etc). Binding the components with more colors will increase the css size so at this point the base theme colors are optimal for our design system.

Regards, Sean

Forget the page of Bootstrap Color palette :

https://getbootstrap.com/docs/5.0/customize/color/#all-colors

thank you

Noted, we will check it :) Thank you!

how can i reinit the script.bundle.js , because my element show in ajax after $(document).ready(function(){});

i need reinit data-kt-menu element, otherwise cant show the menu after click the icon

Hi :),

To initialize populated KTMenu instance you can use following API:

KTMenu.createInstances('data-kt-menu="true"');

You can init other global elements and wrappers defined here core\html\src\js\layout\app.js using:

KTApp.init();

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

Regards, Sean

<button class=”btn btn-sm btn-icon btn-bg-light btn-active-color-primary” data-kt-menu-trigger=”click” data-kt-menu-placement=”bottom-end” data-kt-menu-flip=”top-end”> </button> Action Edit Category Delete Category

please check this code, when i direct put in html is ok no problem, but when i dynamically use this code after $(document).ready(function(){

});

cant show the menu. how can i fix this problem

<div class="me-0"> <button class="btn btn-sm btn-icon btn-bg-light btn-active-color-primary" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-flip="top-end"> <i class="bi bi-three-dots fs-3" /> </button> <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-bold w-200px py-3" data-kt-menu="true"> <div class="menu-item px-3"> <div class="menu-content text-muted pb-2 px-3 fs-7 text-uppercase lan-action">Action</div> </div> <div class="menu-item px-3"> <a href="javascript:" class="menu-link flex-stack px-3 category-edit"> <span class="lan-edit-category">Edit Category</span> <i class="fas fa-edit ms-5 fs-7" /> </a> </div> <div class="menu-item px-3"> <div class="separator border-2 my-2" /> </div> <div class="menu-item px-3"> <a href="javascript:" class="menu-link flex-stack px-3 text-danger category-delete"> <span class="lan-delete-category">Delete Category</span> <i class="fas fa-trash ms-5 fs-7" /> </a> </div> </div> </div>

Hi :),

To initialize populated KTMenu instance you can use following API:

KTMenu.createInstances('data-kt-menu="true"');

You can init other global elements and wrappers defined here core\html\src\js\layout\app.js using:

KTApp.init()

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

Regards, Sean

Dear Support

I am facing an issue with metronic template specially with context menu , I am trying to add two context menu , but when I do that only one is working I shared with you the Html , you can notice only the first one is working and the reset is not working, how can I make all of them working please ?


    First Context Menu
    <!-begin::Svg Icon | path: icons/duotone/Navigation/Angle-down.svg->
     
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <polygon points="0 0 24 0 24 24 0 24"></polygon>
                <path d="M6.70710678,15.7071068 C6.31658249,16.0976311 5.68341751,16.0976311 5.29289322,15.7071068 C4.90236893,15.3165825 4.90236893,14.6834175 5.29289322,14.2928932 L11.2928932,8.29289322 C11.6714722,7.91431428 12.2810586,7.90106866 12.6757246,8.26284586 L18.6757246,13.7628459 C19.0828436,14.1360383 19.1103465,14.7686056 18.7371541,15.1757246 C18.3639617,15.5828436 17.7313944,15.6103465 17.3242754,15.2371541 L12.0300757,10.3841378 L6.70710678,15.7071068 Z" fill="#000000" fill-rule="nonzero" transform="translate(12.000003, 11.999999) rotate(-180.000000) translate(-12.000003, -11.999999)"></path>
            </g>
        </svg>
     
    <!-end::Svg Icon->

<!-begin::Menu->
 
    <!-begin::Menu item->
     
        Edit
     
    <!-end::Menu item->
    <!-begin::Menu item->
     
        Delete
     
    <!-end::Menu item->
 
<!-end::Menu->

    Second Context Menu
    <!-begin::Svg Icon | path: icons/duotone/Navigation/Angle-down.svg->
     
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <polygon points="0 0 24 0 24 24 0 24"></polygon>
                <path d="M6.70710678,15.7071068 C6.31658249,16.0976311 5.68341751,16.0976311 5.29289322,15.7071068 C4.90236893,15.3165825 4.90236893,14.6834175 5.29289322,14.2928932 L11.2928932,8.29289322 C11.6714722,7.91431428 12.2810586,7.90106866 12.6757246,8.26284586 L18.6757246,13.7628459 C19.0828436,14.1360383 19.1103465,14.7686056 18.7371541,15.1757246 C18.3639617,15.5828436 17.7313944,15.6103465 17.3242754,15.2371541 L12.0300757,10.3841378 L6.70710678,15.7071068 Z" fill="#000000" fill-rule="nonzero" transform="translate(12.000003, 11.999999) rotate(-180.000000) translate(-12.000003, -11.999999)"></path>
            </g>
        </svg>
     
    <!-end::Svg Icon->

<!-begin::Menu->
 
    <!-begin::Menu item->
     
        Edit
     
    <!-end::Menu item->
    <!-begin::Menu item->
     
        Delete
     
    <!-end::Menu item->
 
<!-end::Menu->

    Third Context Menu
    <!-begin::Svg Icon | path: icons/duotone/Navigation/Angle-down.svg->
     
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <polygon points="0 0 24 0 24 24 0 24"></polygon>
                <path d="M6.70710678,15.7071068 C6.31658249,16.0976311 5.68341751,16.0976311 5.29289322,15.7071068 C4.90236893,15.3165825 4.90236893,14.6834175 5.29289322,14.2928932 L11.2928932,8.29289322 C11.6714722,7.91431428 12.2810586,7.90106866 12.6757246,8.26284586 L18.6757246,13.7628459 C19.0828436,14.1360383 19.1103465,14.7686056 18.7371541,15.1757246 C18.3639617,15.5828436 17.7313944,15.6103465 17.3242754,15.2371541 L12.0300757,10.3841378 L6.70710678,15.7071068 Z" fill="#000000" fill-rule="nonzero" transform="translate(12.000003, 11.999999) rotate(-180.000000) translate(-12.000003, -11.999999)"></path>
            </g>
        </svg>
     
    <!-end::Svg Icon->

<!-begin::Menu->
 
    <!-begin::Menu item->
     
        Edit
     
    <!-end::Menu item->
    <!-begin::Menu item->
     
        Delete
     
    <!-end::Menu item->
 
<!-end::Menu->

Hi :),

Thanks for your feedback.

The provided code is not readable. Can you please contact our support via support@keenthemes.com and provide full code of your context menu and let us know your Metronic version and your build method(gulp or webpack). You can also share screenshot of your browser console if you have any js errors.

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