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.
Highlights
Modern npm packaging
// This now works out of the box in Vite/webpack — with full type checking:
import { PushMenu, CardWidget, ColorMode } from "admin-lte"- New ESM bundle (
dist/js/adminlte.esm.js+.min) alongside the UMD build - TypeScript declarations ship under
dist/js/types/—types,module, and a fullexportsmap (withsassandstyleconditions) in package.json bootstrapis a peer dependency, so compiling@use "admin-lte/src/scss/adminlte"works right afternpm install admin-lte
Component lifecycle API
Every 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.
ColorMode in the bundle
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.
First automated tests + accessibility gate
- 30-unit vitest suite wired into
npm run production npm run test-a11yruns 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)
New pages & slimmer CSS
- Starter page (the blank v3 starting point, back by popular demand), a dedicated ApexCharts page with six chart types, and a Users management demo
- Docs/FAQ styles moved to a separate
adminlte-docs.css:adminlte.min.cssis now ~40.4 KB gzip, down from 46.7 KB in 4.0.3 - The 1,766-line vendored Bootstrap variables fork is gone — AdminLTE's ~10 overrides live in a small
_bootstrap-overrides.scss(compiled CSS byte-identical)
Install
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.