Download
To set up the Metronic Tailwind CSS integration in Laravel Livewire, you can download the Metronic Integration Examples from our
GitHub repository
. These examples provide a working Laravel Livewire project that demonstrates the integration of Metronic's pre-built assets with Livewire's reactive components.
The Laravel Livewire integration uses Metronic pre-built assets directly. You need to copy the compiled assets from your downloaded Metronic HTML package to complete the integration.
1
Clone Integration Repository
Clone the Metronic integration repository to get the Laravel Livewire example:
git clone https://github.com/keenthemes/metronic-tailwind-html-integration.git
cd metronic-tailwind-html-integration/metronic-tailwind-laravel-livewire
2
Copy Metronic Assets
Copy the pre-built
assets
folder from your
metronic-tailwind-html/dist
directory into the Laravel project's
public/
directory. This creates the structure
public/assets/
.
# From your metronic-tailwind-html distribution
cp -r /path/to/metronic-tailwind-html/dist/assets/* public/assets/
# Verify the structure
ls public/assets/
# Should show: css/ js/ media/ vendors/
3
Install Dependencies
Install the required Laravel and Node.js dependencies:
# Install PHP dependencies
composer install
# Install Node.js dependencies
npm install
# Set up environment
cp .env.example .env
php artisan key:generate
4
Start Development Server
Launch your Laravel Livewire application:
# Start Laravel development server
php artisan serve
# In another terminal, start Vite (for app assets only)
npm run dev
Open your browser and navigate to
http://127.0.0.1:8000
to see your Laravel Livewire app. You can explore both demo layouts:
# Demo 1 - Sidebar Layout
http://127.0.0.1:8000/demo1
# Demo 2 - Header Layout
http://127.0.0.1:8000/demo2
If you prefer to create a project from scratch, follow the manual setup steps in the next sections.
Create Laravel Project
This guide walks you through creating a new Laravel project from scratch and setting up the foundation for integrating Metronic Tailwind CSS with Livewire. We'll use Laravel 11+ with Livewire 3+, focusing on the essential setup required for Metronic integration.
This guide assumes you have PHP 8.2+ and Composer installed. For detailed Laravel installation instructions, refer to the official Laravel documentation .
1
Create Laravel Project with Livewire
Create a new Laravel project and install Livewire. For complete installation details, see the
Laravel installation guide
and
Livewire installation guide
.
# Create new Laravel project
composer create-project laravel/laravel metronic-livewire
cd metronic-livewire
# Install Livewire and Alpine.js
composer require livewire/livewire
npm install alpinejs
# Set up environment
cp .env.example .env
php artisan key:generate
2
Create Metronic Directory Structure
Create the specific directory structure required for Metronic integration with organized Demo1 and Demo2 layouts:
# Create Livewire component directories for Metronic demos
mkdir -p app/Livewire/Demo1
mkdir -p app/Livewire/Demo2
mkdir -p app/Livewire/Shared
# Create view directories for Metronic layouts
mkdir -p resources/views/livewire/demo1
mkdir -p resources/views/livewire/demo2
mkdir -p resources/views/livewire/shared
mkdir -p resources/views/layouts/demo1
mkdir -p resources/views/layouts/demo2
mkdir -p resources/views/layouts/partials
# Create assets directory for Metronic pre-built files
mkdir -p public/assets
3
Test Basic Setup
Verify your Laravel Livewire foundation is working and ready for Metronic integration:
# Run database migrations
php artisan migrate
# Start development server
php artisan serve
# In another terminal, build assets
npm run dev
You should see the Laravel welcome page at
http://127.0.0.1:8000
. Your project foundation is now ready for Metronic integration!
For detailed information about Laravel features like routing, controllers, and middleware, refer to the Laravel documentation . For Livewire concepts like components, properties, and actions, see the Livewire documentation .
Integrate Core
Now that you have a Laravel Livewire foundation, let's create the essential Livewire components and routing structure to display Metronic layouts. We'll focus on the Metronic-specific component organization and data attribute preservation needed for both Demo1 and Demo2 layouts.
This section focuses on Metronic-specific integration. For detailed Livewire component concepts, refer to the Livewire Components documentation .
1
Create Demo Routes
Set up routes for Demo1 and Demo2 layouts using Livewire components. For routing concepts, see the
Laravel routing documentation
.
// routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Livewire\Demo1\Index as Demo1Index;
use App\Livewire\Demo2\Index as Demo2Index;
Route::get('/', function () {
return redirect()->
route('demo1.index');
});
// Demo1 routes
Route::get('/demo1', Demo1Index::class)->name('demo1.index');
// Demo2 routes
Route::get('/demo2', Demo2Index::class)->name('demo2.index');
2
Generate Essential Metronic Components
Generate the core Metronic layout components using Livewire CLI. For detailed component generation options, see the
Livewire component generation guide
.
# Generate main demo index components
php artisan livewire:make Demo1.Index
php artisan livewire:make Demo2.Index
# Generate shared topbar components (essential for both demos)
php artisan livewire:make Shared.TopbarUserDropdown
php artisan livewire:make Shared.MegaMenu
php artisan livewire:make Shared.ThemeToggle
3
Key Metronic Integration Requirements
When creating Metronic Livewire components, preserve these essential Metronic-specific elements:
•
•
•
•
Data Attributes
Preserve all
data-kt-*
attributes for Metronic JavaScript functionality
•
Component Structure
Organize Demo1 (sidebar-based) and Demo2 (header-based) separately
•
Shared Components
Reuse topbar elements across both demo layouts
•
Layout Integration
Components must work within Metronic's HTML structure
4
Configure Demo Layout Components
Configure your main demo components to use Metronic layouts. For complete Livewire component structure, see the
Livewire component structure guide
.
// app/Livewire/Demo1/Index.php - Key Metronic integration
class Index extends Component
{
public function render()
{
return view('livewire.demo1.index')
->layout('layouts.demo1.base'); // Metronic Demo1 layout
}
}
5
Test Core Integration
Verify your Metronic Livewire components are properly set up:
# Clear any cached views
php artisan view:clear
# Start the development server
php artisan serve
# Test the routes
curl -I http://127.0.0.1:8000/demo1
curl -I http://127.0.0.1:8000/demo2
You should see HTTP 200 responses. The pages will show basic Livewire structure until we integrate the Metronic templates and assets in the next sections.
Integrate Styles
Now it's time to integrate Metronic's pre-built assets into your Laravel Livewire project. Unlike traditional Tailwind setups, Metronic provides compiled CSS and JavaScript files that you'll copy directly to your Laravel application and reference using Laravel's asset helpers.
This section assumes you have completed the "Integrate Core" steps. Metronic uses pre-compiled assets, so no Tailwind compilation is required.
1
Copy Metronic Assets
Copy the pre-built Metronic assets from your downloaded Metronic HTML package:
# Navigate to your Laravel project root
cd your-laravel-project
# Copy assets from Metronic HTML package
# Replace /path/to/metronic-tailwind-html with your actual path
cp -r /path/to/metronic-tailwind-html/dist/assets/* public/assets/
# Verify the assets are copied
ls -la public/assets/
# You should see directories like:
# css/, js/, media/, vendors/
2
Create Layout Partials
Create reusable layout partials that reference Metronic assets using Laravel's asset helper:
{{-- resources/views/layouts/partials/head.blade.php --}}
<title>
{{ product.capitalize() }} - Tailwind CSS
</title>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"/>
{{-- Metronic Fonts --}}
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/>
{{-- Metronic Vendor Stylesheets --}}
<link href="{{ asset('assets/vendors/apexcharts/apexcharts.css') }}" rel="stylesheet"/>
<link href="{{ asset('assets/vendors/keenicons/styles.bundle.css') }}" rel="stylesheet"/>
{{-- Metronic Main Stylesheet --}}
<link href="{{ asset('assets/css/styles.css') }}" rel="stylesheet"/>
{{-- resources/views/layouts/partials/scripts.blade.php --}}
{{-- Metronic Core JavaScript --}}
<script src="{{ asset('assets/js/core.bundle.js') }}">
</script>
<script src="{{ asset('assets/vendors/ktui/ktui.min.js') }}">
</script>
{{-- Metronic Vendor Scripts --}}
<script src="{{ asset('assets/vendors/apexcharts/apexcharts.min.js') }}">
</script>
{{-- Metronic Layout Scripts --}}
<script src="{{ asset('assets/js/widgets/general.js') }}">
</script>
<script src="{{ asset('assets/js/layouts/demo1.js') }}">
</script>
3
Create Base Layout Templates
Create the main layout files that integrate Metronic structure with Livewire. For detailed Blade templating syntax, see the
Laravel Blade documentation
.
{{-- resources/views/layouts/demo1/base.blade.php --}}
<!DOCTYPE html>
<html class="h-full" data-kt-theme="true" data-kt-theme-mode="light" dir="ltr" lang="en">
<head>
@include('layouts.partials.head')
@livewireStyles
</head>
<body class="antialiased flex h-full text-base text-foreground bg-background demo1 kt-sidebar-fixed kt-header-fixed">
<livewire:shared.theme-toggle>
</livewire:shared.theme-toggle>
<div class="flex grow">
<livewire:demo1.sidebar>
</livewire:demo1.sidebar>
<div class="kt-wrapper flex grow flex-col">
<livewire:demo1.header>
</livewire:demo1.header>
<main class="grow pt-5" id="content" role="content">
{{ $slot }}
</main>
<livewire:demo1.footer>
</livewire:demo1.footer>
</div>
</div>
@include('layouts.partials.scripts')
@livewireScripts
</body>
</html>
4
Configure Asset Serving
Ensure Laravel properly serves Metronic assets in both development and production:
# For development, assets are served directly from public/assets/
# No additional configuration needed
# For production, ensure proper asset permissions
chmod -R 755 public/assets/
# Verify asset URLs work
curl -I http://127.0.0.1:8000/assets/css/styles.css
curl -I http://127.0.0.1:8000/assets/js/core.bundle.js
5
Test Asset Integration
Verify that Metronic assets are loading correctly:
# Start the development server
php artisan serve
# Test asset accessibility
curl -I http://127.0.0.1:8000/assets/css/styles.css
curl -I http://127.0.0.1:8000/assets/js/core.bundle.js
curl -I http://127.0.0.1:8000/assets/vendors/keenicons/styles.bundle.css
# Check browser console for any 404 errors
# Visit: http://127.0.0.1:8000/demo1
You should see successful HTTP 200 responses for all asset requests. The Metronic styling should now be available for your Livewire components!
For advanced asset management strategies in Laravel, including CDN integration and optimization, refer to the Laravel Filesystem documentation .
Convert Layouts
The final step is converting Metronic's HTML templates to Livewire components while preserving Metronic's functionality, data attributes, and JavaScript integration. This section focuses on the Metronic-specific aspects of the conversion process.
1
Key Conversion Principles
When converting Metronic HTML to Livewire components, preserve these essential elements:
•
•
•
•
Data Attributes
Keep all
data-kt-*
attributes for Metronic JavaScript functionality
•
CSS Classes
Preserve
kt-*
classes and Metronic structure
•
Asset References
Convert to Laravel's
{{ asset() }}
helper
•
Component Integration
Replace static content with Livewire components
2
Convert Demo1 Header Component
Transform the Metronic header HTML into a Livewire component, preserving Metronic-specific functionality:
{{-- resources/views/livewire/demo1/header.blade.php --}}
<header class="kt-header fixed top-0 z-10 start-0 end-0 flex items-stretch shrink-0 bg-background" data-kt-sticky="true" data-kt-sticky-class="border-b border-border" data-kt-sticky-name="header" id="header">
<div class="kt-container-fixed flex justify-between items-stretch lg:gap-4" id="headerContainer">
{{-- Mobile Logo --}}
<div class="flex gap-2.5 lg:hidden items-center -ms-1">
<a class="shrink-0" href="{{ route('demo1.index') }}">
<img class="max-h-[25px] w-full" src="{{ asset('assets/media/app/mini-logo.svg') }}"/>
</a>
<div class="flex items-center">
<button class="kt-btn kt-btn-icon kt-btn-ghost" data-kt-drawer-toggle="#sidebar">
<i class="ki-filled ki-menu">
</i>
</button>
<button class="kt-btn kt-btn-icon kt-btn-ghost" data-kt-drawer-toggle="#mega_menu_wrapper">
<i class="ki-filled ki-burger-menu-2">
</i>
</button>
</div>
</div>
<livewire:shared.mega-menu>
</livewire:shared.mega-menu>
{{-- Topbar --}}
<div class="flex items-center gap-2.5">
<livewire:shared.topbar-search-modal>
</livewire:shared.topbar-search-modal>
<livewire:shared.topbar-notification-dropdown>
</livewire:shared.topbar-notification-dropdown>
<livewire:shared.topbar-chat>
</livewire:shared.topbar-chat>
<livewire:shared.topbar-apps>
</livewire:shared.topbar-apps>
<livewire:shared.topbar-user-dropdown>
</livewire:shared.topbar-user-dropdown>
</div>
</div>
</header>
3
Create Shared Topbar Components
For complete topbar component examples with Metronic's complex HTML structures, refer to the actual project files in the downloaded integration package. Here's the essential pattern:
{{-- resources/views/livewire/shared/topbar-user-dropdown.blade.php --}}
<div class="kt-menu" data-kt-menu="true">
<div class="kt-menu-item" data-kt-menu-item-offset="0, 10px" data-kt-menu-item-placement="bottom-end" data-kt-menu-item-toggle="dropdown" data-kt-menu-item-trigger="click">
<button class="kt-menu-toggle kt-btn kt-btn-icon">
<img alt="User Avatar" class="size-8 rounded-full" src="{{ asset('assets/media/avatars/300-2.jpg') }}"/>
</button>
<div class="kt-menu-dropdown w-screen max-w-xs">
{{-- User dropdown content with Metronic structure --}}
<div class="kt-menu-content">
{{-- Preserve all data-kt-* attributes and kt-* classes --}}
</div>
</div>
</div>
</div>
4
Preserve JavaScript Functionality
Ensure Metronic's JavaScript works with Livewire by initializing Metronic components after Livewire updates:
// resources/js/app.js
import Alpine from 'alpinejs';
// Initialize Metronic functionality
document.addEventListener('DOMContentLoaded', function() {
initializeMetronicComponents();
});
// CRITICAL: Re-initialize after Livewire updates
document.addEventListener('livewire:navigated', function() {
initializeMetronicComponents();
});
// CRITICAL: Re-initialize after any Livewire content updates
document.addEventListener('livewire:updated', function() {
initializeMetronicComponents();
});
// Centralized Metronic component initialization
function initializeMetronicComponents() {
// Initialize all Metronic components
if (window.KTDrawer) {
KTDrawer.createInstances();
}
if (window.KTMenu) {
KTMenu.createInstances();
}
if (window.KTSticky) {
KTSticky.createInstances();
}
if (window.KTScrolltop) {
KTScrolltop.createInstances();
}
if (window.KTImageInput) {
KTImageInput.createInstances();
}
if (window.KTPasswordMeter) {
KTPasswordMeter.createInstances();
}
// Add other Metronic components as needed
}
window.Alpine = Alpine;
Alpine.start();
5
Asset Path Conversion
Convert all Metronic asset references to use Laravel's asset helper:
{{-- Convert image sources --}}
{{-- FROM: src="assets/media/logos/logo.svg" --}}
{{-- TO: --}} src="{{ asset('assets/media/logos/logo.svg') }}"
{{-- Convert background images in CSS --}}
{{-- FROM: background-image: url('assets/media/patterns/pattern-1.jpg') --}}
{{-- TO: --}} style="background-image: url('{{ asset("assets/media/patterns/pattern-1.jpg") }}')"
{{-- Convert icon references --}}
{{-- FROM:
<i class="ki-filled ki-menu">
</i>
--}}
{{-- TO: --}}
<i class="ki-filled ki-menu">
</i>
{{-- No change needed for icon classes --}}
6
Complete Demo Layout Integration
For complete layout examples including Demo2 structure, sidebar components, and complex topbar elements, reference the actual integration files. The key aspects are:
•
•
•
•
Demo1
Sidebar-based layout with header, sidebar, and footer components
•
Demo2
Header-based layout with navbar, toolbar, and footer components
•
Shared Components
Reusable topbar elements across both demos
•
Data Preservation
All Metronic
data-kt-*
attributes maintained
7
Test Complete Integration
Test your complete Metronic Livewire integration:
# Start the development server
php artisan serve
npm run dev
# Test both layouts
# http://127.0.0.1:8000/demo1 (Sidebar layout)
# http://127.0.0.1:8000/demo2 (Header layout)
# Verify in browser:
# - Metronic styling loads correctly
# - JavaScript functionality works (menus, dropdowns, etc.)
# - Livewire components render properly
# - No console errors
You should now have fully functional Metronic layouts with Livewire integration, preserving all Metronic functionality while adding Livewire's reactive capabilities!
For complete component examples with Metronic HTML structures, refer to the actual project files in
metronic-tailwind-laravel-livewire/resources/views/livewire/
from the downloaded integration package.
