Download
Clone the Angular boilerplate repository and copy your Metronic assets into the project.
This integration example uses Angular 20 with Tailwind CSS v4+. The setup already includes all necessary dependencies configured and ready to use.
Download the Metronic Integration Examples from our GitHub repository .
1
Clone the Boilerplate
Clone the repository and move into the Angular project directory:
git clone https://github.com/keenthemes/metronic-tailwind-html-integration.git
cd metronic-tailwind-html-integration/metronic-tailwind-angular
2
Copy Metronic Assets
Copy the
dist/assets
folder contents into
src/assets
.
3
Install & Start
Install dependencies and start the development server:
npm install
ng serve
The boilerplate is ready to use. Start building your application.
Integrate Metronic Assets with Angular Boilerplate
Tailwind CSS is already configured in the boilerplate. Copy your Metronic asset folders (
media/
,
vendors/
,
js/
,
css/
) into
src/assets/
.
1
Copy Metronic Assets
Move your
dist/assets
content into
src/assets
.
2
Reference Metronic CSS/JS in angular.json
The boilerplate already includes the main Metronic CSS and JS in
angular.json
. To add more, update the
styles
or
scripts
arrays:
"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"
]
3
Use Metronic HTML in Your Components
Copy HTML markup from your Metronic HTML package into your Angular component templates.
4
Start Development
Start the dev server with
ng serve
and visit
http://localhost:4200
.
Integrate Core
Metronic's core JavaScript files are already referenced in
angular.json
. If you need to trigger Metronic JS manually, do so in your component's
ngAfterViewInit
hook.
1
Manual Initialization (if needed)
If Metronic features aren't initializing automatically, call their init functions in
ngAfterViewInit
:
// In your Angular component
ngAfterViewInit() {
if (window.KTComponents) {
window.KTComponents.init();
}
if (window.KTLayout) {
window.KTLayout.init();
}
}
2
A Note on KTUI
ktui.min.js
is listed in
angular.json
but can be safely ignored or removed.
