Download
Download the Metronic Integration Examples from our GitHub repository .
Clone the Boilerplate
git clone https://github.com/keenthemes/metronic-tailwind-html-integration.git
cd metronic-tailwind-html-integration/metronic-tailwind-angular
Copy Metronic Assets
dist/assets
folder from your Metronic Tailwind HTML package and drop its contents into
src/assets
in the Angular project. Don’t worry about overwriting—just make sure your assets are in place.
Install & Start
npm install
ng serve
Integrate Metronic Assets with Angular Boilerplate
src/tailwind.css
(which just says
@import \"tailwindcss\";
), and then included in
src/styles.scss
using
@use \"./tailwind\";
. Both files are listed in the
angular.json
styles
array, so you get all the utility classes right out of the box.
media/
,
vendors/
,
js/
,
css/
—into
src/assets/
. The boilerplate already references the main Metronic CSS and JS files in
angular.json
under
styles
and
scripts
. If you need to add more, just drop them into the right array. No need to overthink it.
Copy Metronic Assets
dist/assets
content into
src/assets
. If you’re prompted to overwrite, that’s fine—just make sure your files are in place.
Reference Metronic CSS/JS in angular.json
angular.json
. If you want to add more, just update the
styles
or
scripts
arrays. Here’s a quick example:
"styles": [
"src/tailwind.css",
"src/styles.scss",
"src/assets/vendors/apexcharts/apexcharts.css",
"src/assets/vendors/keenicons/styles.bundle.css",
"src/assets/css/styles.css"
],
"scripts": [
"src/assets/js/core.bundle.js",
"src/assets/vendors/apexcharts/apexcharts.min.js"
]
Use Metronic HTML in Your Components
Start Development
ng serve
and you’re good to go. Visit
http://localhost:4200
to see your app in action.
Integrate Core
angular.json
under
scripts
. For most use cases, you won’t need to do anything extra—just copy your assets and you’re set. If you ever need to trigger Metronic JS manually (for example, after loading dynamic content), you can do so in your Angular component.
Manual Initialization (if needed)
ngAfterViewInit
lifecycle hook. Here’s a quick example:
// In your Angular component
ngAfterViewInit() {
if (window.KTComponents) {
window.KTComponents.init();
}
if (window.KTLayout) {
window.KTLayout.init();
}
}
A Note on KTUI
ktui.min.js
still listed in the
angular.json
scripts. For this setup, you can safely ignore it—Metronic’s core assets are what you need. If you want to clean up, feel free to remove KTUI from the config.