AdminLTE is a comprehensive Bootstrap 4-based administration template framework that provides developers with a complete responsive admin interface solution. It features an extensive collection of pre-built UI components including navigation menus, forms, tables, charts, widgets, and layout elements, all designed with consistent styling and behavior patterns. The framework includes comprehensive JavaScript functionality and integrates popular third-party libraries to provide rich interactive features.
npm install admin-lte@^3.2 --saveyarn add admin-lte@^3.2composer require "almasaeed2010/adminlte=~3.2"git clone https://github.com/ColorlibHQ/AdminLTE.gitAdminLTE is distributed as a UMD module that works with ES6 imports, CommonJS, and browser globals:
// ES6 import (requires bundler like Webpack/Rollup)
import {
CardRefresh, CardWidget, ControlSidebar, DirectChat, Dropdown,
ExpandableTable, Fullscreen, IFrame, Layout, PushMenu,
SidebarSearch, NavbarSearch, Toasts, TodoList, Treeview
} from 'admin-lte';// CommonJS require
const { CardWidget, PushMenu } = require('admin-lte');// Browser global (after including script tag)
const { CardWidget } = window.adminlte;For browser usage:
<script src="node_modules/admin-lte/dist/js/adminlte.min.js"></script>
<link rel="stylesheet" href="node_modules/admin-lte/dist/css/adminlte.min.css">Via CDN:
<!-- Required dependencies -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE -->
<script src="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/js/adminlte.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/css/adminlte.min.css">
<!-- Font Awesome icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css">AdminLTE components can be used programmatically or through data attributes:
// Programmatic initialization
import { CardWidget } from 'admin-lte';
const cardElement = document.querySelector('.card');
const cardWidget = new CardWidget(cardElement, {
animationSpeed: 'fast',
collapseTrigger: '[data-card-widget="collapse"]'
});
// jQuery plugin usage (if jQuery is available)
$('.card').CardWidget({
animationSpeed: 'fast'
});<!-- Data attribute initialization (automatic) -->
<div class="card">
<div class="card-header">
<h3 class="card-title">Card Title</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="card-body">Card content</div>
</div>AdminLTE is built around several key architectural patterns:
$.fn.ComponentName registrationdata-widget="pushmenu").lte.{component} namespaceInteractive card widgets with collapse, expand, refresh, and removal functionality. Perfect for dashboard panels and content containers.
class CardWidget {
constructor(element: HTMLElement, options?: CardWidgetOptions);
collapse(): void;
expand(): void;
toggle(): void;
remove(): void;
maximize(): void;
minimize(): void;
toggleMaximize(): void;
}
class CardRefresh {
constructor(element: HTMLElement, options?: CardRefreshOptions);
load(): void;
}Core layout management and navigation components including sidebar, navbar, and responsive layout controls.
class Layout {
constructor(element: HTMLElement, options?: LayoutOptions);
fixLayoutHeight(extra?: string): void;
fixLoginRegisterHeight(): void;
}
class PushMenu {
constructor(element: HTMLElement, options?: PushMenuOptions);
expand(): void;
collapse(): void;
toggle(): void;
autoCollapse(resize?: boolean): void;
}Search functionality for navbar and sidebar navigation with keyboard navigation and result highlighting.
class NavbarSearch {
constructor(element: HTMLElement, options?: NavbarSearchOptions);
open(): void;
close(): void;
toggle(): void;
}
class SidebarSearch {
constructor(element: HTMLElement, options?: SidebarSearchOptions);
init(): void;
search(): void;
open(): void;
close(): void;
}Advanced UI widgets including treeview navigation, expandable tables, todo lists, and direct chat interfaces.
class Treeview {
constructor(element: HTMLElement, options?: TreeviewOptions);
init(): void;
expand(treeviewMenu: HTMLElement, parentLi: HTMLElement): void;
collapse(treeviewMenu: HTMLElement, parentLi: HTMLElement): void;
toggle(event: Event): void;
}
class TodoList {
constructor(element: HTMLElement, options?: TodoListOptions);
toggle(item: HTMLElement): void;
check(item: HTMLElement): void;
unCheck(item: HTMLElement): void;
}Utility components for fullscreen mode, dropdown management, iframe handling, and toast notifications.
class Fullscreen {
constructor(element: HTMLElement, options?: FullscreenOptions);
toggle(): void;
fullscreen(): void;
windowed(): void;
}
class Toasts {
constructor(element: HTMLElement, options?: ToastsOptions);
create(): void;
}Comprehensive SCSS variable system and component styling for complete visual customization.
// Core color variables
$blue: #0073b7 !default;
$sidebar-width: 250px !default;
$main-bg: #f4f6f9 !default;
// Layout variables
$boxed-layout-max-width: 1250px !default;
$content-padding-y: 0 !default;
$main-header-height: calc(#{$main-header-height-inner} + #{$main-header-bottom-border-width}) !default;AdminLTE integrates 60+ popular third-party libraries including DataTables, Chart.js, Select2, FullCalendar, and many more for enhanced functionality.
// Major integrated plugins
const plugins = {
datatables: 'DataTables with Bootstrap 4 theme',
chartjs: 'Chart.js for charts and graphs',
select2: 'Enhanced select boxes',
fullcalendar: 'Event calendar functionality',
summernote: 'WYSIWYG editor',
daterangepicker: 'Date range selection',
sweetalert2: 'Beautiful alert dialogs'
};