AdminLTE 4 for Laravel

Official AdminLTE 4 integration for Laravel — Bootstrap 5.3, vanilla JS (no jQuery), Vite-ready.

This package gives you a config-driven sidebar menu, ready-to-extend Blade layouts, and a set of AdminLTE Blade components (<x-adminlte-card>, <x-adminlte-small-box>, …) on top of the admin-lte npm package.

The legacy jeroennoten/laravel-adminlte targets AdminLTE 3 (Bootstrap 4 + jQuery). This package is the AdminLTE 4 successor: Bootstrap 5.3, vanilla TS plugins, Laravel 13, PHP 8.3+, Vite instead of precompiled assets.

Requirements

• PHP 8.3+
• Laravel 13
• Node.js 18+ (for the Vite asset pipeline)

Installation

composer require colorlibhq/adminlte-laravel
php artisan adminlte:install

adminlte:install publishes config/adminlte.php, drops the Vite entry stubs into resources/js/adminlte.js and resources/css/adminlte.css, and offers to npm install the frontend dependencies (admin-lte, bootstrap, @popperjs/core, overlayscrollbars, bootstrap-icons, sass).

Add the two entry files to your vite.config.js:

laravel({
    input: [
        'resources/css/adminlte.css',
        'resources/js/adminlte.js',
    ],
    refresh: true,
}),

Then build:

npm run dev   # or: npm run build

Check your install at any time:

php artisan adminlte:status

Usage

A page

@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <div class="row">
        <div class="col-sm-6"><h3 class="mb-0">Dashboard</h3></div>
    </div>
@stop

@section('content')
    <div class="row g-3">
        <div class="col-lg-3 col-6">
            <x-adminlte-small-box title="150" text="New Orders" icon="bi bi-cart" theme="primary" url="#" />
        </div>
        <div class="col-lg-3 col-6">
            <x-adminlte-info-box title="44" text="Registrations" icon="bi bi-person-plus" theme="success" />
        </div>
    </div>

    <x-adminlte-card title="Quick form" icon="bi bi-pencil" theme="primary" outline collapsible>
        <x-adminlte-input name="email" label="Email" type="email" placeholder="you@example.com" />
        <x-adminlte-button type="submit" theme="primary" icon="bi bi-check-lg" label="Save" />
    </x-adminlte-card>
@stop

The menu

Define your sidebar in config/adminlte.php under menu:

'menu' => [
    ['header' => 'MAIN'],
    ['text' => 'Dashboard', 'route' => 'dashboard', 'icon' => 'bi bi-speedometer'],
    ['text' => 'Users', 'url' => 'users', 'icon' => 'bi bi-people', 'can' => 'view-users', 'label' => 5, 'label_color' => 'danger'],
    ['header' => 'CONTENT'],
    [
        'text' => 'Posts',
        'icon' => 'bi bi-file-post',
        'submenu' => [
            ['text' => 'All posts', 'url' => 'posts'],
            ['text' => 'New post', 'url' => 'posts/create'],
        ],
    ],
],

Supported keys: header, text, route, url, icon, icon_color, label, label_color, active (url patterns), target, can (gate), submenu. Active state and authorization are resolved automatically by the menu filters.

Components

Form components auto-display validation errors from the session and repopulate with old() input.

Customization

Everything in config/adminlte.php is documented inline — title, logo, layout switches (layout_fixed_sidebar, fixed_navbar, sidebar_mini, …), the color-mode toggle, sidebar theme, and custom element classes.

For deeper visual changes (sidebar width, breakpoints, brand colors), compile AdminLTE's SCSS — see the customization guide and Option B in resources/css/adminlte.css.

License

MIT © Colorlib. See LICENSE.