Metronic Documentation | Keenthemes
The World’s #1 Bootstrap 5 HTML, VueJS, React, Angular & Laravel
Admin Dashboard Ecosystem

This is Metronic 7 documentation!

Upon purchase you can get Metronic 7 version from our Github Repository.
Request Github access
The new Metronic 8 is now available with the most advanced Bootstrap 5, VueJS, React and Laravel foundation with a solid light and dark mode design system, extensive utility classes and custom made in-house components.
View Metronic 8 documentation

To use most of the Metronic build tools, Node.js LTS version is required. Version 14.x LTS is recommended. Some of the plugins and framework in Metronic v7 does not support the latest Node.js version.


React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable and easier to debug.

Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.

Files Structure

Path Description
/build The built output. Run command yarn build to build it.
/node_modules The package.json file in the app root defines what libraries will be installed into node_modules/ when you run yarn install.
/public Folder contains the index.html file so you can tweak it, Change <title>, insert additional <link> and <script> tags. For more details check official documentation. Also in '/public/media' folder you able to find all images/icons/SVGs and Splash Screen styles.
/src Your app lives in the src folder. All React components, styles and anything else your app needs go here.
/src/_metronic/_assets Contains the Metronic common parts: js(Layout js helpers), plugins(icons plugins), sass(common style structure).
/src/_metronic/_helpers Contains shared utils which are used by all application modules.
/src/_metronic/_partials Contains shared components which are used by all application modules.
/src/_metronic/i18n Contains react-intl implementations.
/src/_metronic/layout/_core Contains Layout core logic which is based on React.Context. Also includes Material-UI overriding and layout configuration file(LayoutConfig.js).
/src/_metronic/layout/layout Contains Layout components(Layout, Header, Aside, Footer...).
/src/app/modules Contains application lazy modules (Authorization, eCommerce, Errors examples...)
/src/app/pages Contains application pages (Dashboard page, Builder page...)
/src/app/App.js is the application entry point.
/src/app/BasePage.js Private routes entry point.
/src/app/Routes.js Application routing is based on React Routing.
/src/app/redux Contains redux setup(rootReducer, store), axios setup and mock adapter setup.
/src/index.js The JavaScript entry point.
/src/index.scss Styles entry point.
serve.json serve.json is used by serve-handler running by command yarn serve.
package.json A package.json file contains meta data about app or module. Most importantly, it includes the list of dependencies to install from npm when running npm install.

For the project to build, these files must exist with exact filenames:

  • public/index.html is the page template;
  • src/index.js is the JavaScript entry point.

You can delete or rename the other files.

You may create subdirectories inside src. For faster rebuilds, only files inside src are processed by webpack. You need to put any JS and CSS files inside src, otherwise webpack won’t see them.

Only files inside public can be used from public/index.html.

You can, however, create more top-level directories. They will not be included in the production build so you can 'use' them for things like documentation.

If you have Git installed and your project is not part of a larger repository, then a new repository will be initialized resulting in an additional top-level .git directory.

Our Metronic React application is based on Create React App. For more detailed information of the CRA, visit the official Create React App documentation website.

Think About The Future, Stay Connected With Us
The More We Learn, The More We Are Able To Innovate & To Develop