Download
To get started, you’ll want to grab the official Angular boilerplate. There’s no need to build anything from the ground up—just clone the repository and you’re halfway there. The setup already includes Angular 20 and Tailwind CSS v4+, so you can focus on what matters: your project. Once you’ve got the boilerplate, simply copy your Metronic assets into the right spot. No extra configuration, no unnecessary steps. If you run into anything odd, we’re here to help.
View the Angular Boilerplate on GitHub
View the Angular Boilerplate on GitHub
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
Take the
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.
3
Install & Start
Run the following commands to install dependencies and launch the development server. Everything else is already set up for you.
npm install
ng serve
That’s all there is to it. The boilerplate takes care of the heavy lifting, so you can get right to building. If you need to tweak or extend, the structure’s flexible enough to handle it.
Integrate Metronic Assets with Angular Boilerplate
You won’t need to fuss with Tailwind installation or configuration—everything’s already wired up in the boilerplate. Tailwind CSS is brought in through
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.
For Metronic, just copy your asset folders—
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.
1
Copy Metronic Assets
Move your
dist/assets
content into
src/assets
. If you’re prompted to overwrite, that’s fine—just make sure your files are in place.
2
Reference Metronic CSS/JS in angular.json
The boilerplate already includes the main Metronic CSS and JS in
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"
]
3
Use Metronic HTML in Your Components
Copy any HTML markup you need from your Metronic HTML package into your Angular component templates. The boilerplate’s setup means you can use Metronic classes and structure right away.
4
Start Development
Fire up the dev server with
ng serve
and you’re good to go. Visit
http://localhost:4200
to see your app in action.
Integrate Core
Metronic’s core JavaScript files are already referenced in the boilerplate’s
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.
1
Manual Initialization (if needed)
If you find that certain Metronic features aren’t initializing automatically, you can call their init functions in your component’s
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();
}
}
2
A Note on KTUI
You might notice
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.
