Download
To set up the Metronic Tailwind CSS integration in Laravel, you can download the Metronic Integration Examples from our
GitHub repository
. These examples provide a quick way to integrate the Metronic styles into your Laravel 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
resources
directory of your Laravel project. Rename the copied folder to
metronic
so that the directory structure should now look like this:
resources/metronic
.
2
Copy Media Folder
Copy the
media
folder from the
metronic-tailwind-html
package's
dist/assets/media
directory into your Laravel project's
public/assets
directory. The resulting directory structure should look like this:
public/assets/media
.
3
Install, Compile & Start Development Server
Run the following command in the root directory of your Laravel project to install dependencies and start the development server:
npm install
npm run dev
php artisan serve
Creating a Laravel Project
This guide will walk you through the step-by-step process of creating a Laravel project from scratch.
1
Install Composer
Before creating a Laravel project, you need to have Composer installed. You can download Composer from
https://getcomposer.org/
.
2
Install Laravel
Once Composer is installed, open your terminal and run the following command to install Laravel:
composer create-project --prefer-dist laravel/laravel metronic-laravel
metronic-laravel
with the desired name for your Laravel project.
3
Navigate to Laravel Project
Now that Laravel is installed, navigate to your project folder.
cd metronic-laravel
4
Run Laravel Development Server
To view your Laravel project in the browser, run the following command to start the development server:
php artisan serve
Open your browser and navigate to
http://localhost:8000
to see your Laravel app in action.
Integrate Metronic & KtUI with Laravel
This guide will walk you through integrating Metronic and KtUI into your Laravel project using Vite. Tailwind CSS is not required for this setup.
1
Navigate to Laravel Project
Navigate to your project folder.
cd your-laravel-project
2
Install Dependencies
Run the following command to install KtUI and required dependencies:
npm install @keenthemes/ktui
3
Copy Metronic Source Files
Copy the
src
folder from your Metronic HTML package to
resources/metronic
in your Laravel project.
4
Update the path to the KtUI source files
Update the path to the KtUI source files in
resources/metronic/css/styles.css
to:
@source '../../dist/assets/vendors/ktui/';
// ...
@source '../../../node_modules/@keenthemes/ktui/src/';
5
Import Metronic Styles
Edit
resources/css/app.css
, remove the existing
@import 'tailwindcss';
and replace it with:
@import '../metronic/css/styles.css';
@import '../metronic/vendors/keenicons/duotone/style.css';
@import '../metronic/vendors/keenicons/filled/style.css';
@import '../metronic/vendors/keenicons/outline/style.css';
@import '../metronic/vendors/keenicons/solid/style.css';
6
Import KtUI and Metronic Scripts
Edit
resources/js/app.js
and add:
import '../metronic/core/index';
import '@keenthemes/ktui/src/index';
7
Copy Media Assets
Copy the
media
folder from
metronic-tailwind-html/dist/assets/media
to
public/assets/media
in your Laravel project.
8
Create Your Blade View
Copy your desired HTML (e.g., from
dist/html/demo1/index.html
) to
resources/views/index.blade.php
.
In your Blade file, add:
@if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
@vite(['resources/css/app.css', 'resources/js/app.js'])
@endif
9
Start Development
Run the following commands to start the development server:
npm run dev
Open separate terminal and run:
php artisan serve
Visit
http://localhost:8000
in your browser.
