Metronic - Tailwind CSS Laravel Livewire

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.

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

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/

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

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 .

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

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

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 .

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');

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

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

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
    }
}

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.

'dict object' has no attribute 'warning'

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.

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/

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>

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>

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

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.

'dict object' has no attribute 'warning'

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

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>

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>

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();

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 --}}

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

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.

Getting Started

Customization

Base Components

Navigation

Forms

3rd-Party Plugins

Laravel Livewire

Download

Clone Integration Repository

Copy Metronic Assets

Install Dependencies

Start Development Server

Create Laravel Project

Create Laravel Project with Livewire

Create Metronic Directory Structure

Test Basic Setup

Integrate Core

Create Demo Routes

Generate Essential Metronic Components

Key Metronic Integration Requirements

Configure Demo Layout Components

Test Core Integration

Integrate Styles

Copy Metronic Assets

Create Layout Partials

Create Base Layout Templates

Configure Asset Serving

Test Asset Integration

Convert Layouts

Key Conversion Principles

Convert Demo1 Header Component

Create Shared Topbar Components

Preserve JavaScript Functionality

Asset Path Conversion

Complete Demo Layout Integration

Test Complete Integration

On This Page

Getting Started

Customization

Base Components

Navigation

Forms

3rd-Party Plugins

Laravel Livewire

​ Download

Clone Integration Repository

Copy Metronic Assets

Install Dependencies

Start Development Server

​ Create Laravel Project

Create Laravel Project with Livewire

Create Metronic Directory Structure

Test Basic Setup

​ Integrate Core

Create Demo Routes

Generate Essential Metronic Components

Key Metronic Integration Requirements

Configure Demo Layout Components

Test Core Integration

​ Integrate Styles

Copy Metronic Assets

Create Layout Partials

Create Base Layout Templates

Configure Asset Serving

Test Asset Integration

​ Convert Layouts

Key Conversion Principles

Convert Demo1 Header Component

Create Shared Topbar Components

Preserve JavaScript Functionality

Asset Path Conversion

Complete Demo Layout Integration

Test Complete Integration

On This Page

Download

Create Laravel Project

Integrate Core

Integrate Styles

Convert Layouts