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-react-tailwind -- --template react-ts
cd metronic-react-tailwind
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
metronic-react-tailwind/src
directory.
Rename the copied folder to
theme
. The directory structure should now look like this:
metronic-react-tailwind/src/theme
This step imports the necessary styles and assets from the original HTML package into your React project.
2
Import Styles
Open the React main style file
/src/index.css
and add the following import statement:
@import "./theme/vendors/keenicons/duotone/style.css";
@import "./theme/vendors/keenicons/filled/style.css";
@import "./theme/vendors/keenicons/outline/style.css";
@import "./theme/vendors/keenicons/solid/style.css";
@import "./theme/css/styles.css";
#root {
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-html-tailwind/
and paste it to
metronic-react-tailwind
.
Replace named export with the default export
export default {
plugins: {
'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/theme/core/plugins/plugin'),
require('./src/theme/core/plugins/layouts/demo1'),
require('./src/theme/core/plugins/components/theme'),
require('./src/theme/core/plugins/components/breakpoints'),
require('./src/theme/core/plugins/components/typography'),
require('./src/theme/core/plugins/components/menu'),
require('./src/theme/core/plugins/components/dropdown'),
require('./src/theme/core/plugins/components/accordion'),
require('./src/theme/core/plugins/components/input'),
require('./src/theme/core/plugins/components/input-group'),
require('./src/theme/core/plugins/components/select'),
require('./src/theme/core/plugins/components/textarea'),
require('./src/theme/core/plugins/components/file-input'),
require('./src/theme/core/plugins/components/switch'),
require('./src/theme/core/plugins/components/checkbox'),
require('./src/theme/core/plugins/components/radio'),
require('./src/theme/core/plugins/components/range'),
require('./src/theme/core/plugins/components/container'),
require('./src/theme/core/plugins/components/image-input'),
require('./src/theme/core/plugins/components/modal'),
require('./src/theme/core/plugins/components/drawer'),
require('./src/theme/core/plugins/components/tooltip'),
require('./src/theme/core/plugins/components/popover'),
require('./src/theme/core/plugins/components/btn'),
require('./src/theme/core/plugins/components/btn-group'),
require('./src/theme/core/plugins/components/tabs'),
require('./src/theme/core/plugins/components/pagination'),
require('./src/theme/core/plugins/components/card'),
require('./src/theme/core/plugins/components/table'),
require('./src/theme/core/plugins/components/badge'),
require('./src/theme/core/plugins/components/rating'),
require('./src/theme/core/plugins/components/scrollable'),
require('./src/theme/core/plugins/components/progress'),
require('./src/theme/core/plugins/components/apexcharts'),
require('./src/theme/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-react-tailwind/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.ts"></script>
</body>
</html>
2
Setup Media
Copy the media folder from
metronic-tailwind-html/dist/assets
and paste it into
metronic-react-tailwind/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-react-tailwind/App.ts
add script section with the initialization code in onMounted hook.
// index.tsx
import { useEffect } from 'react';
import KTComponent from './theme/core/index.spa';
import KTLayout from './theme/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.
import { useEffect } from 'react';
import KTComponent from '../theme/core/index.spa';
import KTLayout from '../theme/app/layouts/demo1.js';
const location = useLocation();
useEffect(() => {
KTComponent.init();
KTLayout.init();
}, [location]);