How to Integrate AdminLTE with Laravel (2026 Guide)

AdminLTE is one of the most popular open-source admin dashboard templates, and Laravel remains the leading PHP framework. Combining them gives you a professional, feature-rich admin panel with minimal effort. This guide covers integrating AdminLTE 4 (built on Bootstrap 5) with Laravel 11 or 12 — the current versions as of 2026.

We’ll cover two approaches: the quick route using the popular jeroennoten/Laravel-AdminLTE package, and the manual setup for full control. Both use Vite, Laravel’s default asset bundler.

Prerequisites

Before we begin, make sure you have:

PHP 8.2+ (required by Laravel 11/12)
Composer 2.x
Node.js 18+ and npm
A database (MySQL, PostgreSQL, or SQLite)
Basic familiarity with Laravel’s MVC structure and Blade templating

Step 1: Create a Fresh Laravel Project

Install the Laravel installer globally (if you haven’t already) and create a new project:

composer global require laravel/installer

laravel new admin-panel

Alternatively, you can create a project directly with Composer:

composer create-project laravel/laravel admin-panel

Navigate into your project and verify it runs:

cd admin-panel
php artisan serve

Visit http://localhost:8000 and you should see the Laravel welcome page. Laravel 12 ships with a streamlined directory structure — the resources/views directory is where we’ll add our AdminLTE Blade templates.

Option A: Quick Setup with Laravel-AdminLTE Package

The easiest way to integrate AdminLTE with Laravel is the jeroennoten/Laravel-AdminLTE package. It provides Blade components, layout templates, authentication views, and a configuration file to customize everything — sidebar menu, navbar, footer, and plugins.

Install the Package

composer require jeroennoten/laravel-adminlte

Then publish the required assets and configuration:

php artisan adminlte:install

This command publishes AdminLTE’s CSS, JS, and font files to your public/vendor directory and creates a config file at config/adminlte.php.

Set Up Authentication Views (Optional)

If you’re using Laravel Breeze or a custom auth setup, you can replace the default auth views with AdminLTE-styled ones:

php artisan adminlte:install --only=auth_views

Create Your First Admin Page

Create a new Blade view that extends the AdminLTE layout. In resources/views/admin/dashboard.blade.php:

@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <h1>Dashboard</h1>
@stop

@section('content')
    <div class="row">
        <div class="col-lg-3 col-6">
            <div class="small-box bg-info">
                <div class="inner">
                    <h3>150</h3>
                    <p>New Orders</p>
                </div>
                <div class="icon">
                    <i class="bi bi-cart"></i>
                </div>
                <a href="#" class="small-box-footer">
                    More info <i class="bi bi-arrow-right-circle"></i>
                </a>
            </div>
        </div>
    </div>
@stop

@section('css')
    {{-- Extra CSS here --}}
@stop

@section('js')
    <script>
        console.log("AdminLTE dashboard loaded.");
    </script>
@stop

Add a route in routes/web.php:

Route::get('/admin', function () {
    return view('admin.dashboard');
});

Customize the Sidebar

Open config/adminlte.php and find the 'menu' array. Here you can define your sidebar navigation:

'menu' => [
    ['header' => 'MAIN NAVIGATION'],
    [
        'text' => 'Dashboard',
        'url'  => 'admin',
        'icon' => 'bi bi-speedometer2',
    ],
    [
        'text' => 'Users',
        'url'  => 'admin/users',
        'icon' => 'bi bi-people',
    ],
    [
        'text'    => 'Settings',
        'icon'    => 'bi bi-gear',
        'submenu' => [
            ['text' => 'General', 'url' => 'admin/settings'],
            ['text' => 'Security', 'url' => 'admin/settings/security'],
        ],
    ],
],

The package supports Font Awesome, Bootstrap Icons, and other icon sets. AdminLTE 4 defaults to Bootstrap Icons, but you can configure whichever you prefer.

Option B: Manual Integration (Full Control)

If you want complete control over the setup — or need to customize AdminLTE deeply — you can integrate it manually. This approach uses Vite, Laravel’s default asset bundler since Laravel 9.19+.

Install AdminLTE 4 via npm

npm install admin-lte@^4.0 @popperjs/core bootstrap@^5.3

AdminLTE 4 is a complete rewrite built on Bootstrap 5, dropping the jQuery dependency that older versions required.

Configure Vite

Open vite.config.js in your project root and configure it to process AdminLTE’s assets:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

Import AdminLTE Styles

In resources/css/app.css, import the AdminLTE stylesheet:

@import 'admin-lte/dist/css/adminlte.css';

Or, if you prefer SCSS for deeper customization, rename the file to app.scss and import the source:

// Override variables before import
$primary: #0d6efd;
$sidebar-dark-bg: #1a1a2e;

@import 'admin-lte/dist/css/adminlte.css';

Import AdminLTE JavaScript

In resources/js/app.js:

import 'admin-lte/dist/js/adminlte.js';

Create the Blade Layout

Create a master layout at resources/views/layouts/admin.blade.php:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@yield('title', 'Admin Panel')</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
    <div class="app-wrapper">
        @include('layouts.partials.navbar')
        @include('layouts.partials.sidebar')

        <main class="app-main">
            <div class="app-content-header">
                <div class="container-fluid">
                    @yield('content_header')
                </div>
            </div>
            <div class="app-content">
                <div class="container-fluid">
                    @yield('content')
                </div>
            </div>
        </main>

        @include('layouts.partials.footer')
    </div>
</body>
</html>

Create the Sidebar Partial

Create resources/views/layouts/partials/sidebar.blade.php:

<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
    <div class="sidebar-brand">
        <a href="/" class="brand-link">
            <span class="brand-text fw-light">My Admin</span>
        </a>
    </div>
    <div class="sidebar-wrapper">
        <nav class="mt-2">
            <ul class="nav sidebar-menu flex-column" role="menu">
                <li class="nav-item">
                    <a href="/admin" class="nav-link {{ request()->is('admin') ? 'active' : '' }}">
                        <i class="nav-icon bi bi-speedometer2"></i>
                        <p>Dashboard</p>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="/admin/users" class="nav-link">
                        <i class="nav-icon bi bi-people"></i>
                        <p>Users</p>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</aside>

Build Assets

Run Vite to compile everything:

# Development (with hot reload)
npm run dev

# Production build
npm run build

Customizing Your Admin Panel

AdminLTE 4 provides extensive customization through CSS variables and Bootstrap 5’s theming system. Here are the most common customizations:

Theme Colors

AdminLTE 4 supports both light and dark modes out of the box via Bootstrap 5’s data-bs-theme attribute. You can set it on the <body> or individual components:

<!-- Dark sidebar with light main content -->
<body class="layout-fixed sidebar-expand-lg" data-bs-theme="light">
    <aside class="app-sidebar" data-bs-theme="dark">
        ...
    </aside>
</body>

Navbar Customization

The navbar can be fixed, static, or hidden. In AdminLTE 4, control this with body classes:

<!-- Fixed navbar -->
<body class="layout-fixed layout-navbar-fixed">

<!-- Fixed sidebar and navbar -->
<body class="layout-fixed layout-navbar-fixed sidebar-expand-lg">

Dynamic Sidebar with Laravel

For larger applications, you’ll want to generate sidebar items dynamically. Create a service provider or use a view composer:

// app/Providers/AppServiceProvider.php
public function boot(): void
{
    View::composer('layouts.partials.sidebar', function ($view) {
        $menuItems = [
            ['icon' => 'bi bi-speedometer2', 'text' => 'Dashboard', 'url' => '/admin'],
            ['icon' => 'bi bi-people', 'text' => 'Users', 'url' => '/admin/users'],
            ['icon' => 'bi bi-box', 'text' => 'Products', 'url' => '/admin/products'],
        ];

        $view->with('menuItems', $menuItems);
    });
}

Adding Authentication

Laravel provides several authentication scaffolding options. For an AdminLTE-powered panel, Laravel Breeze is the simplest starting point:

composer require laravel/breeze --dev
php artisan breeze:install blade
npm install && npm run build
php artisan migrate

After installing Breeze, you can restyle its authentication views using your AdminLTE layout. AdminLTE 4 includes pre-built login, register, and forgot-password page designs that you can adapt for your Blade views.

Key Differences: AdminLTE 4 vs. AdminLTE 3

If you’ve used AdminLTE before, here’s what changed in version 4:

Bootstrap 5 — No more jQuery dependency. Data attributes use the data-bs- prefix.
CSS Variables — Theme customization uses CSS custom properties instead of SCSS variables for runtime changes.
Dark Mode — Built-in support via Bootstrap 5’s data-bs-theme="dark".
New Layout Classes — The wrapper structure uses .app-wrapper, .app-sidebar, .app-main, and .app-footer instead of the old class names.
Bootstrap Icons — Default icon set changed from Font Awesome to Bootstrap Icons (Font Awesome still works).

Production Tips

Before deploying your AdminLTE + Laravel application, keep these tips in mind:

Run npm run build to generate optimized, versioned assets with Vite.
Cache config and routes with php artisan config:cache and php artisan route:cache.
Use middleware to protect admin routes — apply auth and role-based middleware to your admin route group.
Consider lazy-loading plugins — AdminLTE 4 includes optional plugins (charts, calendars, etc.). Only load what you need to keep bundle size small.

Useful Resources

Here are some additional resources to help you build your Laravel admin panel:

Best Laravel Admin Dashboard Templates — A curated list of admin templates that work well with Laravel, including AdminLTE and alternatives.
Building Laravel Dashboards — Tips and best practices for creating data-driven dashboards in Laravel.
AdminLTE vs CoreUI vs Tabler — A detailed comparison to help you choose the right admin template for your project.
AdminLTE 4 Documentation
Laravel Documentation

Conclusion

Integrating AdminLTE with Laravel in 2026 is straightforward whether you choose the package route or manual setup. The jeroennoten/Laravel-AdminLTE package gets you running in minutes with sensible defaults and easy configuration. The manual approach gives you full control over every aspect of the layout and asset pipeline.

AdminLTE 4’s move to Bootstrap 5 and the removal of the jQuery dependency align perfectly with modern Laravel’s Vite-powered frontend. Combined with Laravel 11/12’s streamlined application structure, you can have a professional admin panel up and running in under an hour.

12 Mar, 2026