Metronic - Tailwind CSS

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.

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.

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.

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

.

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,

Getting Started

Customization

Base Components

Navigation

Forms

Plugins

React

Download

Copy Source Folder

Copy Media Folder

Install Packages & Start Development Server

Creating Project

Install Node.js and Npm

Create an React Project

Install dependencies

Serve the React Application

Integrate Styles

Copy Source Folder

Import Styles

Copy Postcss Configuration

Copy Tailwind Configuration

Setup Static Files

Integrate Theme Mode Initialization Script

Setup Media

Integrate Core

Initialize global typescript components

Using typescript initialization with React-router

Disable Strict Mode

On This Page

Getting Started

Customization

Base Components

Navigation

Forms

Plugins

React

​ Download

Copy Source Folder

Copy Media Folder

Install Packages & Start Development Server

​ Creating Project

Install Node.js and Npm

Create an React Project

Install dependencies

Serve the React Application

​ Integrate Styles

Copy Source Folder

Import Styles

Copy Postcss Configuration

Copy Tailwind Configuration

​ Setup Static Files

Integrate Theme Mode Initialization Script

Setup Media

​ Integrate Core

Initialize global typescript components

Using typescript initialization with React-router

Disable Strict Mode

On This Page

Download

Creating Project

Integrate Styles

Setup Static Files

Integrate Core