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.
Download the Metronic Integration Examples from our GitHub repository .
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-demos/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-demos/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-demos/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.
