Download
Get started with your React project by downloading the Metronic integration examples from our GitHub
repository. These examples provide a quick way to integrate the Metronic styles into your React project. This will give you a working starting point that you can customize to fit your needs.
Please note that the sample project does not include the Metronic Tailwind CSS source files by default. To integrate the styles, you need to copy the Metronic Tailwind CSS source files from your downloaded Metronic folder.
1
Copy Source Folder
Copy the
src folder from the metronic-tailwind-html package and paste it into the React src directory. Rename the copied folder to metronic so that the directory structure should now look like this: src/metronic.
This step imports the necessary styles and assets from the original HTML package into your React project.
In the
src/metronic/core folder, delete the unnecessary index.ts file. This file is not needed for Single Page Application (SPA) integration as it could cause conflicts. Instead, rename the
index.spa.ts file to index.ts to ensure proper integration.
Remove
KTLayout instance initialization from src/metronic/app/layouts/demo1.js.
KTDom.ready(() => {
KTLayout.init();
});
2
Copy Media Folder
Copy the
media folder from the metronic-tailwind-html package's
dist/assets/media directory into your React project's public directory.
3
Install Packages & Start Development Server
Install the required Node.js packages by running
npm
install. Start the React development server by running npm run dev.
npm install
npm run dev
That's it! You now have the Metronic Tailwind template integrated into your React project.
Creating Project
This guide will lead you through the essential steps of creating React project from scratch.
1
Install Node.js and Npm
Before starting with React, ensure you have Node.js and npm (Node Package Manager) installed on your machine. Visit https://nodejs.org/ to download and install the latest version.
2
Create an React Project
Using react-ts template create new React Vite project with typescript support.
npm create vite@latest metronic-tailwind-react -- --template react-ts
cd metronic-tailwind-react
3
Install dependencies
Install dependencies and devDependencies using the following command:
npm install @popperjs/core && npm install --D tailwindcss postcss autoprefixer mini-svg-data-uri postcss-import postcss-loader postcss-nesting postcss-preset-env
The command will install the core mandatory dependencies needed to get started with Metronic. If you want to use apexcharts,
axios, or clipboard, they must be installed separately.
4
Serve the React Application
Run the development server with the following commands:
npm run dev
Open your browser and navigate to
http://localhost:5173/ to see your new React app in action.
Integrate Styles
This guide provides a detailed walkthrough of the key steps required to
integrate the Metronic Tailwind CSS stylesheet into your React project.
1
Copy Source Folder
Copy the
src folder from the metronic-tailwind-html package and paste it into the React src directory. Rename the copied folder to metronic so that the directory structure should now look like this: src/metronic.
This step imports the necessary styles and assets from the original HTML package into your React project.
In the
src/metronic/core folder, delete the unnecessary index.ts file. This file is not needed for Single Page Application (SPA) integration as it could cause conflicts. Instead, rename the
index.spa.ts file to index.ts to ensure proper integration.
Remove
KTLayout instance initialization from src/metronic/app/layouts/demo1.js.
KTDom.ready(() => {
KTLayout.init();
});
2
Import Styles
Open the React main style file
/src/index.css and add the following import statement:
@import "../metronic/vendors/keenicons/duotone/style.css";
@import "../metronic/vendors/keenicons/filled/style.css";
@import "../metronic/vendors/keenicons/solid/style.css";
@import "../metronic/vendors/keenicons/outline/style.css";
@import "../metronic/css/styles.css";
#__next {
display: contents;
}
This step ensures that the styles and icon fonts are properly imported and applied to your React project.
3
Copy Postcss Configuration
Copy
postcss.config.js from metronic-tailwind-html/ and paste it to
metronic-tailwind-react.
Replace named export with the default export
export default {
plugins: {
'postcss-preset-env': {},
'postcss-import': {},
'tailwindcss/nesting': 'postcss-nesting',
'postcss-preset-env': {
features: { 'nesting-rules': false },
},
'tailwindcss': {},
'autoprefixer': {},
},
}
4
Copy Tailwind Configuration
Copy the
tailwind.config.js file from the metronic-tailwind-html package to the root of your
React project.
Edit the file and update the following content to the
content and plugins array:
// ...
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
// ...
// ...
plugins: [
require('./src/metronic/core/plugins/plugin'),
require('./src/metronic/core/plugins/components/theme'),
require('./src/metronic/core/plugins/components/breakpoints'),
require('./src/metronic/core/plugins/components/typography'),
require('./src/metronic/core/plugins/components/menu'),
require('./src/metronic/core/plugins/components/dropdown'),
require('./src/metronic/core/plugins/components/accordion'),
require('./src/metronic/core/plugins/components/input'),
require('./src/metronic/core/plugins/components/input-group'),
require('./src/metronic/core/plugins/components/select'),
require('./src/metronic/core/plugins/components/textarea'),
require('./src/metronic/core/plugins/components/file-input'),
require('./src/metronic/core/plugins/components/switch'),
require('./src/metronic/core/plugins/components/checkbox'),
require('./src/metronic/core/plugins/components/radio'),
require('./src/metronic/core/plugins/components/range'),
require('./src/metronic/core/plugins/components/container'),
require('./src/metronic/core/plugins/components/image-input'),
require('./src/metronic/core/plugins/components/modal'),
require('./src/metronic/core/plugins/components/drawer'),
require('./src/metronic/core/plugins/components/tooltip'),
require('./src/metronic/core/plugins/components/popover'),
require('./src/metronic/core/plugins/components/btn'),
require('./src/metronic/core/plugins/components/btn-group'),
require('./src/metronic/core/plugins/components/tabs'),
require('./src/metronic/core/plugins/components/pagination'),
require('./src/metronic/core/plugins/components/card'),
require('./src/metronic/core/plugins/components/table'),
require('./src/metronic/core/plugins/components/badge'),
require('./src/metronic/core/plugins/components/rating'),
require('./src/metronic/core/plugins/components/scrollable'),
require('./src/metronic/core/plugins/components/progress'),
require('./src/metronic/core/plugins/components/apexcharts'),
require('./src/metronic/core/plugins/components/leaflet')
]
// ...
This step configures Tailwind CSS to scan and process your React project files, and it also integrates additional
Metronic plugins.
Setup Static Files
This guide will help you to configuring static
index.html and media resources in React.
1
Integrate Theme Mode Initialization Script
To set up theme mode initialization in your project, copy the
index.html content below,
which includes the theme mode initialization script and necessary classes, and paste it into your metronic-tailwind-react/index.html file.
<!doctype html>
<html class="h-full light" data-theme="true" lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body class="flex h-full demo1 sidebar-fixed header-fixed bg-[#fefefe] dark:bg-coal-500">
<script>
const defaultThemeMode = "light"; // light|dark|system
let themeMode;
if ( document.documentElement ) {
if ( localStorage.getItem("theme")) {
themeMode = localStorage.getItem("theme");
} else if ( document.documentElement.hasAttribute("data-theme-mode")) {
themeMode = document.documentElement.getAttribute("data-theme-mode");
} else {
themeMode = defaultThemeMode;
}
if (themeMode === "system") {
themeMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
}
document.documentElement.classList.add(themeMode);
}
</script>
<div id="app"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
2
Setup Media
Copy the media folder from
metronic-tailwind-html/dist/assets and paste it into metronic-tailwind-react/public.
Then you can reference these files in your components using paths like /media/avatars/300-1.png.
Integrate Core
This guide provides a detailed walkthrough of the key steps required to
integrate the Metronic core components into your React project.
1
Initialize global typescript components
In file
metronic-tailwind-react/App.tsx add script section with the initialization code in onMounted hook.
// App.tsx
import { useEffect } from 'react';
import KTComponent from './metronic/core/index.spa';
import KTLayout from './metronic/app/layouts/demo1.js';
useEffect(() => {
KTComponent.init();
KTLayout.init();
}, []);
2
Using typescript initialization with React-router
To use typescript components in combination with react-router, the component initialization must be triggered on every page change.
// index.tsx
import { useEffect } from 'react';
import KTComponent from '../metronic/core/index.spa';
import KTLayout from '../metronic/app/layouts/demo1.js';
const location = useLocation();
useEffect(() => {
KTComponent.init();
KTLayout.init();
}, [location]);
3
Disable Strict Mode
In the
tsconfig.json file, set the strict property to false.
"strict": false,
