Laravel 12 & AdminLTE Integration: Setup Your Stunning Admin Dashboard

AdminLTE is a popular, open-source admin dashboard template built with Bootstrap. It offers a sleek, responsive, and customizable interface that is perfect for building admin panels, backend systems, and dashboards. When paired with Laravel 12, AdminLTE makes it easy to build beautiful, functional interfaces in less time.

In this guide, you’ll learn how to integrate AdminLTE with Laravel 12 using the powerful jeroennoten/laravel-adminlte package — from setup to dashboard creation.

🧱 Step 1: Create a Laravel 12 Project

To begin, ensure you have Composer installed on your system. Then, create a new Laravel 12 project by running:

composer create-project --prefer-dist laravel/laravel adminlte-laravel "12.*"

Navigate into your project folder:

cd adminlte-laravel

📦 Step 2: Install the AdminLTE Package

Now install the official AdminLTE package for Laravel via Composer:

composer require jeroennoten/laravel-adminlte

This package provides seamless integration between Laravel and AdminLTE, including pre-built layout support and configuration options.

⚙️ Step 3: Run the AdminLTE Installer

After installation, run the AdminLTE install command:

php artisan adminlte:install

This command sets up:

• A configuration file at config/adminlte.php
• Required assets and plugins (CSS and JS)
• Support for extending AdminLTE layouts in your views

🧾 Step 4: Create a Reusable Admin Layout

To build a consistent layout for all admin views, create a new Blade layout file.

📄 File: resources/views/admin/app.blade.php

@extends('adminlte::page')

@section('title', $title ?? 'Dashboard')

@section('content_header')
    <h1>@yield('page-title', 'Admin Panel')</h1>
@stop

@section('content')
    {{-- Dynamic content --}}
    @yield('content')
@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('css/admin-custom.css') }}">
    @stack('styles')
@stop

@section('js')
    @stack('scripts')
@stop

This file acts as a master layout. You can now use it across all admin views by extending it.

📊 Step 5: Create the Admin Dashboard View

Now let’s create a dashboard page that uses the admin layout.

📄 File: resources/views/admin/dashboard.blade.php

@extends('admin.app')

@section('title', 'Dashboard')
@section('page-title', 'Admin Dashboard')

@section('content')
    <div class="card">
        <div class="card-body">
            <p>Welcome to your admin dashboard!</p>
        </div>
    </div>
@endsection

🧑‍💻 Step 6: Create a Dashboard Controller

Generate a controller to handle the dashboard route:

php artisan make:controller Admin/DashboardController

Then update the controller as follows:

📄 File: app/Http/Controllers/Admin/DashboardController.php

namespace App\Http\Controllers\Admin;

use App\Http\Controllers\Controller;

class DashboardController extends Controller
{
    public function index()
    {
        return view('admin.dashboard');
    }
}

🌐 Step 7: Define Admin Routes

Open the routes/web.php file and add the following routes:

use App\Http\Controllers\Admin\DashboardController;

Route::prefix('admin')->name('admin.')->group(function () {
    Route::get('/dashboard', [DashboardController::class, 'index'])->name('dashboard');
});

This ensures that only authenticated users can access the admin dashboard at /admin/dashboard.

🧭 Step 8: Customize the Sidebar Menu

The sidebar menu is fully configurable via config/adminlte.php. Open that file and scroll to the menu array:

'menu' => [
    [
        'text' => 'Dashboard',
        'url'  => 'admin/dashboard',
        'icon' => 'fas fa-tachometer-alt',
    ],
    // Add more links here
],

This will automatically show the Dashboard link in the sidebar.

🎨 Step 9: Add Custom Styles and Scripts

To add custom styles, create your CSS file:

📄 File: public/css/admin-custom.css

body {
    background-color: #f5f6fa;
}

.card {
    border-radius: 0.5rem;
}

Then reference it in the layout (admin/app.blade.php):

@section('css')
    <link rel="stylesheet" href="{{ asset('css/admin-custom.css') }}">
    @stack('styles')
@stop

You can also add per-page styles and scripts using @push:

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/some-feature.css') }}">
@endpush

@push('scripts')
    <script src="{{ asset('js/some-feature.js') }}"></script>
@endpush

🚀 Step 10: Run the App and Test

Start the Laravel development server:

php artisan serve

Now visit:

http://localhost:8000/admin/dashboard

If authentication is enabled, you’ll be prompted to log in. After that, you’ll see your fully working AdminLTE dashboard.

📌 Bonus: Add Authentication (Optional)

If your project doesn’t yet have login/register features, you can install Laravel Breeze:

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

Then register and log in to access the admin area.

✅ Summary

🏁 Conclusion

Integrating AdminLTE into your Laravel 12 application is a smooth and efficient way to build admin panels and dashboards. With its flexible layout system and rich UI components, AdminLTE gives you a ready-made design system to accelerate development and ensure a professional experience for your users.

By following this step-by-step guide, you now have a solid foundation for building out your own admin tools, user management, and analytics dashboard.

Happy coding! 🚀