almasaeed2010/adminlte
AdminLTE is a popular MIT-licensed admin dashboard template built on Bootstrap 5.3 with vanilla JavaScript (no jQuery). Fully responsive, highly customizable, and easy to use for web apps—from mobile to desktop. Live demo and docs available.
AdminLTE 4.1.0 is the biggest developer-experience release of the 4.x line: the npm package finally speaks modern JavaScript (ESM + TypeScript types), the components got a real lifecycle API, the dark-mode switcher ships in the bundle, and the project has its first automated test suite — including an accessibility gate that already runs clean.
// This now works out of the box in Vite/webpack — with full type checking:
import { PushMenu, CardWidget, ColorMode } from "admin-lte"
dist/js/adminlte.esm.js + .min) alongside the UMD builddist/js/types/ — types, module, and a full exports map (with sass and style conditions) in package.jsonbootstrap is a peer dependency, so compiling [@use](https://github.com/use) "admin-lte/src/scss/adminlte" works right after npm install admin-lteEvery component now follows the Bootstrap contract: getInstance(element), getOrCreateInstance(element, config?), and dispose(), backed by a WeakMap registry (Turbo-safe by construction). The data API uses delegated document-level listeners, so cards and toggles inserted after page load — AJAX partials, Turbo Frames — work without re-initialisation. And the sidebar is finally scriptable:
PushMenu.getInstance(document.querySelector(".app-sidebar"))?.collapse()
Behavior change: all plugin events are now bubbling CustomEvents dispatched on the component's root element, animated actions have cancelable "before" events (e.g. veto remove.lte.card-widget with preventDefault()), and "after" events fire when the animation completes. If you listened for card events on the tool buttons, listen on the card or on document instead — see the CHANGELOG for the full event table.
The light/dark/auto switcher is now a proper module in adminlte.js — persisted, OS-preference aware, with a changed.lte.color-mode event. No more copy-pasting the demo's inline script.
npm run productionnpm run test-a11y runs axe-core (WCAG 2.1 A/AA) against seven built demo pages and fails on serious/critical violations — currently zero, after fixing the findings it immediately surfaced (breadcrumb link contrast, keyboard-unreachable chat pane)adminlte-docs.css: adminlte.min.css is now ~40.4 KB gzip, down from 46.7 KB in 4.0.3_bootstrap-overrides.scss (compiled CSS byte-identical)npm install admin-lte@4.1.0
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@4.1.0/dist/css/adminlte.min.css" />
<script src="https://cdn.jsdelivr.net/npm/admin-lte@4.1.0/dist/js/adminlte.min.js"></script>
// Or as a module
import { PushMenu } from "admin-lte"
Full details in the CHANGELOG.
AdminLTE 4.0.0 — first stable release of the v4 line. A ground-up rewrite on Bootstrap 5.3 with no jQuery.
📖 Documentation · 🚀 Migration from v3 · 🎨 Live preview
prefers-color-scheme integration.eslint-plugin-import, eslint-config-xo*, and the legacy .eslintrc.json. Flat config only.overrides for yaml and stylelint-config-twbs-bootstrap mean npm install runs without --legacy-peer-deps and reports 0 vulnerabilities.| v3 | v4 |
|---|---|
.wrapper |
.app-wrapper |
.main-header |
.app-header |
.main-sidebar |
.app-sidebar |
.content-wrapper |
.app-main |
data-toggle |
data-bs-toggle (Bootstrap 5) |
data-widget="pushmenu" |
data-lte-toggle="sidebar" |
data-widget="treeview" |
data-lte-toggle="treeview" |
.dark-mode body class |
data-bs-theme="dark" attribute |
| jQuery required | Vanilla TypeScript — no jQuery |
enablePersistence defaulted on |
Defaults off; opt in via data-enable-persistence="true" |
See the dedicated Migration from v3 guide for the complete list and step-by-step upgrade order.
npm install admin-lte@4.0.0
Or via CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0/dist/css/adminlte.min.css" />
<script src="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0/dist/js/adminlte.min.js"></script>
See CHANGELOG.md for the full notes.
This release delivers significant JavaScript refactors to the layout and push menu plugins, fixes several bugs affecting print, pagination, modals, and animations, and updates all dependencies to their latest semver-compatible versions.
_bootstrap-variables.scss calc syntax with Bootstrap 5.3, fixing grouped pagination buttons showing rounded corners on all sides (#5951, reported by @Kneemund)handleEscapeKey() no longer bypasses Bootstrap 5's keyboard: false option on modals (#5993, reported by @braytac)setTimeout ordering when duration is 0, which caused sidebar treeview instant-open to fail (#5964, PR by @Kneemund)Layout transition handling (#5956 by @dfsmania):
holdTransition timer (local variable promoted to instance property)resize event listeners registered on every calllayout.ts (removed duplication from adminlte.ts)app-loaded class application to layout Data API sectionPush menu plugin overhaul (#5954 by @dfsmania):
PushMenu instance instead of creating new instances per event handlersetupSidebarBreakPoint() and updateStateByResponsiveLogic()sidebar-open class only added on mobile viewports (aligns with v3 behavior)menusClose() method and dead constantsremoveComments: true to tsconfig.json, reducing unminified adminlte.js by ~15% (#5953 by @dfsmania)Updated all packages to latest semver-compatible versions:
[@astrojs](https://github.com/astrojs)/check 0.9.7, [@astrojs](https://github.com/astrojs)/mdx 4.3.13[@typescript-eslint](https://github.com/typescript-eslint)/* 8.57.0astro 5.18.0, autoprefixer 10.4.27eslint 9.39.4, eslint-plugin-astro 1.6.0fs-extra 11.3.4, nodemon 3.1.14postcss 8.5.8, prettier 3.8.1rimraf 6.1.3, rollup 4.59.0sass 1.97.3, terser 5.46.0enablePersistence defaults to false (was true). To restore the previous behavior where sidebar state is remembered across page loads, add data-enable-persistence="true" to your sidebar element:
<aside class="app-sidebar" data-enable-persistence="true"></aside>
Thank you to everyone who contributed to this release:
npm install admin-lte@4.0.0-rc4
This release represents a complete modernization of the AdminLTE codebase, bringing it up to current standards with the latest tooling, dependencies, and best practices.
npm start command, improved scripts, cleaner builds# Install dependencies
npm install
# Start development server
npm start
# Build for production
npm run production
"type": "module" in package.jsonastro: 4.15.12 → 5.10.0eslint: 8.57.1 → 9.29.0bootstrap: 5.3.3 → 5.3.7sass: 1.78.0 → 1.89.2typescript: 5.6.2 → 5.8.3For Users:
For Developers:
npm start command for developmenteslint.config.jsSee CHANGELOG.md for complete technical details.
Download: Use npm: npm install admin-lte@4.0.0-rc1 or download the source code below.
dist.js-beautify with prettier for code formatting.sass to a compatible version.astro to version 5.bootstrap to version 5.3.3.@spizzo14 @tomhappyblock @stefanmorderca @tito10047 @sitchi @npreee @isaacmorais
Full Changelog: https://github.com/ColorlibHQ/AdminLTE/compare/v4.0.0-beta2...v4.0.0-beta3
.layout-fixed-complete class and component.@spizzo14 @tomhappyblock @stefanmorderca @tito10047 @sitchi @npreee
Full Changelog: https://github.com/ColorlibHQ/AdminLTE/compare/v4.0.0-beta1...v4.0.0-beta2
@spizzo14 @stefanmorderca @tomhappyblock @tito10047 @sitchi
Full Changelog: https://github.com/ColorlibHQ/AdminLTE/compare/v3.2.0...v4.0.0-beta1
Breaking Change! We dropped official node v12, it might be still work but we won't give support for any node 12 bugs/errors.
Top-Features:
Fixes:
Changes:
Thanks for your awesome contribution @liljack, @danny007in, @curiousteam, @equada, @Shidersz, @gurvirlochab, @ZhangChengLin, @mostafahesham-dev, @smtbos, @leonardxfce, @anilloutombam, @13324, @SmileYzn, @hkvstore, @rikuson, @kreic51, @forxer & @mahmoudalsaman.
For the complete changelog look here.
Breaking Change! Changed SCSS filename case
build/scss/AdminLTE-raw.scss → build/scss/_adminlte.raw.scssbuild/scss/AdminLTE.scss → build/scss/adminlte.scssbuild/scss/AdminLTE-components.scss → build/scss/parts/adminlte.components.scssbuild/scss/AdminLTE-core.scss → build/scss/parts/adminlte.core.scssbuild/scss/AdminLTE-extra-components.scss → build/scss/parts/adminlte.extra-components.scssbuild/scss/AdminLTE-pages.scss → build/scss/parts/adminlte.pages.scssbuild/scss/AdminLTE-plugins.scss → build/scss/parts/adminlte.plugins.scssNew in v3.1:
Changes:
rel=noopener for external linksdiplay=fallback for Google Fontsfullcalendar)fullcalendar)fullcalendar)fullcalendar)fullcalendar)Thanks to @XhmikosR for the 55+ incredible PR's also Thanks for the PR's to @shawnheide, @mineminemine, @shailesh-ladumor, @SmileYzn, @yangfuhai, @nisarhassan12, @danny007in
For the complete changelog look here.
This is only short description, the complete will come in the full release.
Breaking Change! Changed SCSS filename case
build/scss/AdminLTE-raw.scss → build/scss/_adminlte.raw.scssbuild/scss/AdminLTE.scss → build/scss/adminlte.scssbuild/scss/AdminLTE-components.scss → build/scss/parts/adminlte.components.scssbuild/scss/AdminLTE-core.scss → build/scss/parts/adminlte.core.scssbuild/scss/AdminLTE-extra-components.scss → build/scss/parts/adminlte.extra-components.scssbuild/scss/AdminLTE-pages.scss → build/scss/parts/adminlte.pages.scssbuild/scss/AdminLTE-plugins.scss → build/scss/parts/adminlte.plugins.scssNew in v3.1:
For the complete changelog look here.
Thanks to @medardm, @danny007in, @erdkse & @ddiskandar for your PR's.
For the complete changelog look here.
5.11.2 to 5.13.04.3.0 to 4.4.04.3.1 to 4.4.04.3.0 to 4.4.04.3.0 to 4.4.04.3.0 to 4.4.02.2.1 to 3.1.44.3.1 to 4.4.13.1.2 to 3.2.01.3.2 to 1.3.43.4.5 to 3.4.63.2.13 to 4.2.08.1.0 to 9.0.04.0.9 to 5.0.32.3.0 to 2.3.13.2.2 to 3.3.01.10.0 to 1.11.00.1.62 to 0.1.651.16.0 to 1.16.14.0.12 to 4.0.130.8.12 to 0.8.168.19.0 to 9.10.87.7.4 to 7.8.47.7.4 to 7.9.07.7.4 to 7.8.37.7.4 to 7.9.09.7.3 to 9.7.510.0.3 to 10.1.03.2.1 to 3.4.26.7.2 to 6.8.03.3.0 to 3.5.11.19.4 to 2.0.26.1.3 to 7.1.01.27.8 to 2.3.24.3.3 to 4.4.03.0.1 to 3.0.21.0.1 to 1.1.34.4.2 tom 4.6.10For the complete changelog look here.
For the complete changelog look here.
For the complete changelog look here.
For the complete changelog look here.
For the complete changelog look here.
For the complete changelog look here.
For the complete changelog look here.
For the complete changelog look here.
For the complete changelog look here.
Thanks for the great response for v3.0.0-rc.1.
For the complete changelog look here.
For the complete changelog look here.
package.json and bower.jsonFor the complete changelog look here.
For the complete changelog look here.
Thanks @Leviasan @andymark-by @maxwellmc for your PRs
ENOTFOUND Package [@dev](https://github.com/dev) not found% to vh & added content-wrapper calc() with collapsed header* to [@dev](https://github.com/dev) to avoid minimum-stability errorcolor: inherit to .tableheader from 1000 to 900 sidebar from 1100 to 950 (below bootstrap 4 defaults to work with dropdown, modal, popover & tooltip).content-wrapper min-height.nav-child-indent on ul.nav-sidebar[@gray](https://github.com/gray) instead of [@gray-lighter](https://github.com/gray-lighter)How can I help you explore Laravel packages today?