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.
dist/js/adminlte.esm.js (+ .min) ships alongside the UMD build, generated .d.ts files ship under dist/js/types/, and package.json gains module, types, and a full exports map (with sass/style conditions and ./dist/* + ./src/scss/* subpaths). import { PushMenu } from "admin-lte" now resolves natively in Vite/webpack and type-checks out of the box — previously the package shipped a single minified UMD file with no typings at all.getInstance(element), getOrCreateInstance(element, config?) and dispose(), backed by a per-element WeakMap registry (instances are garbage-collected with their elements — Turbo-safe). The data API now uses delegated document-level listeners, so toggles inside content inserted after page load (AJAX partials, Turbo Frames) work without re-initialisation. PushMenu is finally controllable programmatically via PushMenu.getInstance(sidebar).ColorMode module in the bundle: the light/dark/auto switcher (persisted in lte-theme, OS-preference aware, [data-bs-theme-value] data-API, changed.lte.color-mode event) is now part of adminlte.js. Applications no longer need to copy the demo's inline script; the demo pages now use the bundled module. Only the tiny no-flash snippet in <head> remains inline, by design.bootstrap declared as a peer dependency — the Sass source imports it, so [@use](https://github.com/use) "admin-lte/src/scss/adminlte" now works after a plain npm install admin-lte (npm installs the peer automatically). Documented the required Sass load-path setup.npm run production; plus npm run test-a11y — an axe-core check over key built demo pages that fails on serious/critical WCAG violations, with a dedicated GitHub workflow.tabindex="0" + role="log"), and muted footnote text uses text-body-secondary instead of the failing text-secondary.CustomEvents dispatched on the component's root element (the card, the nav item, the sidebar) — previously most were non-bubbling and card events fired on whatever was clicked, including the <i> icon. Animated actions gained cancelable "before" events (collapse/expand/remove.lte.card-widget, expand/collapse.lte.treeview, open/collapse.lte.push-menu) and their "after" events (collapsed, expanded, removed, opened, …) now fire when the animation completes, not when it starts. If you listened for card events on the tool buttons themselves, listen on the card or on document instead.adminlte-docs.css, loaded only by the docs pages. Together with the 4.0.4 dedup, adminlte.min.css is down to ~40.4 KB gzip (from 46.7 KB in 4.0.3); bundlewatch budgets tightened accordingly._bootstrap-variables.scss copy (which had to be re-synced by hand every Bootstrap release) is gone; AdminLTE's ~10 actual changes now live in a small _bootstrap-overrides.scss loaded before Bootstrap's own variables. Compiled CSS is byte-identical.--quiet); it silences only dependency warnings and the known [@import](https://github.com/import) deprecation (--quiet-deps --silence-deprecation=import), so new deprecations in AdminLTE's own code surface at build time. All deprecated global built-ins (map-get, map-keys) migrated to the sass:map module. The full [@use](https://github.com/use) module-system migration is intentionally deferred until Bootstrap ships module-system Sass (Bootstrap 6) — Bootstrap 5's partials are designed around [@import](https://github.com/import)'s shared global namespace and cannot be loaded individually via [@use](https://github.com/use).ColorMode module (the old copy-paste script it showed used a stale storage key); tsconfig.json no longer carries the invalid "root": true option.forgot-password.html since 4.0.0, but the page didn't exist (dead link in every deployed demo). Now shipped and listed in the sidebar under Examples › Version 1.aria-expanded, stamped on init and kept in sync on open/close.files allowlist instead of the .npmignore denylist. Stray local files can no longer leak into the tarball (4.0.2 shipped an untracked working file this way), and the demo/docs HTML — which SECURITY.md advises never to deploy — is no longer published to npm. Unpacked size drops from 12.7 MB to 9.0 MB (177 → 95 files). Also declares engines: node >= 20._docs.scss was imported from both adminlte.scss and parts/_core.scss, and Sass [@import](https://github.com/import) duplicates output — ~23 KB of dead weight in each of the four dist stylesheets.show.bs.modal (capturing on shown stored an element inside the modal, so closing dropped focus to <body>); [autofocus] is respected#live-region, and sidebar overlay are now reused when a restored <body> snapshot already contains them — previously they accumulated one copy per navigation.remove() now actually removes the card from the DOM after the animation (it only hid it, so hidden form fields kept submitting); clicking the collapse toggle mid-animation reverses it instead of being swallowed; widget events now dispatch on the toggle button itself rather than a clicked <i> icon; minimize() cleans up its inline styles.<ul> (never true), so open() on an already-open item slid its own menu shut.matchMedia on the actual breakpoint crossing — mobile URL-bar/keyboard resizes and same-side width changes no longer re-expand a sidebar the user collapsed; the default breakpoint (991.98) now matches the CSS convention, fixing a 992px off-by-one.--bs-light-bg, which doesn't exist in Bootstrap 5.3 (now --bs-tertiary-bg).data-widget="navbar-search" has no implementation in v4); every page now has exactly one <h1> (page titles were <h3>); breadcrumbs are wrapped in <nav aria-label="breadcrumb">; all icon-only buttons (card tools, topbar toggles) have aria-labels; auth forms have real <label>s and <main> landmarks; dated "Google+" copy updated.turbo:load, so PushMenu, TreeView and the other JS components keep working after Turbo swaps the <body> on in-app navigation (previously they went dead after the first link click). Each init cycle uses an AbortController whose signal is aborted on turbo:before-render, so the window/document-level listeners are torn down before re-init instead of stacking up on every navigation. (#563, #5890 — diagnosed and prototyped by @MarkDaleman in #6058)maximized/minimized events are now driven by the native fullscreenchange event instead of the request/exit calls. The UI no longer flips when a fullscreen request is denied (permissions policy, missing allowfullscreen, lost user gesture), and it now stays in sync when the user exits with ESC or F11. (builds on @webgo-oss's report in #6055)id and a name now receive a stable, generated error-message id instead of colliding on a shared -error id and appending a new orphaned error node on every re-validation. (#6055, reported by @webgo-oss)npm run production pipeline (lint + Astro build + bundlewatch) passes and npm audit remains at 0 vulnerabilities. (supersedes Dependabot PRs #6065–#6074)npm run production no longer fails — the dev-only scripts/social-preview.mjs tripped 9 ESLint errors when building from source. The script is now lint-clean. (reported by @lfiorini)django.contrib.admin, {{ form }} rendererscripts/social-preview.mjs, dev-only — excluded from the npm package).accessibility.js no longer assigns role="navigation" to <ul>/<ol> elements, which broke list semantics and failed the Lighthouse accessibility audit. (reported by @lfiorini)axios pinned via npm overrides to clear a transitive advisory. npm audit remains at 0 vulnerabilities.docs/integrations.html) — copy-paste install snippets for Flatpickr, Tom Select, noUiSlider, Pickr, IMask, Dropzone, FilePond, Quill, EasyMDE, Toast UI Editor, ApexCharts, Chart.js, Tabulator, FullCalendar, SortableJS, GLightbox, and a comparison of icon libraries. AdminLTE doesn't bundle these — the page shows how to drop them in.prefers-color-scheme integration. Wiring JS shipped globally in _scripts.astro so the toggle works on every demo page automatically.forms/general.html into three focused pages — forms/elements.html (inputs, selects, checks/radios/switches, ranges, floating labels), forms/layout.html (horizontal, inline, sizing, width), and forms/validation.html (Bootstrap native validation + tooltip variant).bi-circle-fill-half-stroke (a FontAwesome class name); replaced with the correct Bootstrap Icons class bi-circle-half..table-head-fixed now respects dark mode. Hardcoded background-color: $white swapped for var(--bs-body-bg) so the sticky header tracks the active colour scheme.iconMaximize.style.display = 'block' directly, overriding the icon library's natural display value (visible on FontAwesome). Now toggles Bootstrap's .d-none utility class. Markup updated accordingly..fixed-header. New companion rule pins the sidebar sticky on sidebar-expand-* breakpoints, giving the menu its own scrollbar instead of scrolling with the page.index2.html no longer flickers on browser zoom. Pinned an explicit height: 350 to break the ApexCharts ResizeObserver feedback loop most visible on Edge.$btn-close-filter, $carousel-control-icon-filter$btn-close-white-filter, $carousel-dark-indicator-active-bg, $carousel-dark-caption-color, $carousel-dark-control-icon-filter$modal-content-color (null vs Bootstrap's var(--bs-body-color))baseUrl removed, moduleResolution: "bundler" set to clear deprecation warnings).eslintrc.json (ignored since ESLint 9), along with three deps that only it referenced: eslint-plugin-import, eslint-config-xo, eslint-config-xo-typescript. Added explicit deps for [@eslint](https://github.com/eslint)/js, globals, and typescript-eslint (now required to be declared since ESLint 10 stopped resolving them transitively).stylelint-config-twbs-bootstrap peer pinned via npm overrides so it accepts stylelint 17 ahead of an upstream release. This removes the need for --legacy-peer-deps on npm install.yaml pinned to ^2.9.0 via overrides to clear the dev-only stack-overflow advisory chain through [@astrojs](https://github.com/astrojs)/check. npm audit now reports 0 vulnerabilities.sidebar-without-hover body class that prevents collapsed mini sidebar from expanding on hover (#5837)
layout/collapsed-sidebar-without-hover.htmlenablePersistence now defaults to false (was true). Opt in via data-enable-persistence="true" on .app-sidebar. BREAKING CHANGE.fixed-footer and .layout-fixed (#5805)overscroll-behavior: contain to prevent page scroll when scrolling sidebar on mobile (#5864)calc() syntax in _bootstrap-variables.scss to match Bootstrap 5.3 format (#5951)removeComments: true to tsconfig.json for smaller unminified bundles (#5953)enablePersistence option (default: true)lte.sidebar.statesetup-node action from v3 to v4 across all workflowsFORCE_COLOR: 2 environment variable to codeql.yml for consistency-d flag to -r for recursive directory zipping:scope > selector to only target direct card-body/footer children.eslintignore file
eslint.config.jsshx
copy-assets script to use shx mkdir and shx cp commandsflatten-build script to use shx cp and shx rm commandsshx package as dev dependency for cross-platform shell command supporttransition: none and opacity: 1 instead of display: block/assets/img/user.jpg caused 404 errors on mobileThis release resolves critical production deployment issues and ensures consistent behavior between development and production environments across different deployment scenarios.
./css/ for root, ../css/ for sub-pages)rtlcss plugin interference with LTR builds
rtlcss now only runs during RTL-specific builds (NODE_ENV=RTL).rtl.css files for right-to-left language support/assets/img/...) to relative pathssidebar-open class to all layouts for consistent styling.sidebar-menu .nav-link { width: 100%; } for better UXintegrity attributes from all CDN resources
crossorigin="anonymous" for security while removing brittle SRI checkssrc/html/public/ for hot-reloadingdist/css/ and dist/js/ then flattens structuredist/ folder to repository
prefer-global-this and prefer-string-slice linting issues/themes/v4/ or similar pathsnpm run dev - all features verified workingnpm run production - 37 pages built successfully, 0 errorspython3 -m http.server - full functionality confirmed# Build for production
npm run production
# Deploy via FTP (upload entire dist/ folder contents)
# Or serve locally for testing
cd dist && python3 -m http.server 8080
dist/ contents to public_html/ or equivalentdist/ contents to public_html/admin/ or similardist/ in your hosting platformAutomatic Updates (No Action Required):
Recommended Actions:
dist/ structurenpm run dev) and production buildsBreaking Changes:
This release modernizes AdminLTE to ES2022 standards and implements comprehensive WCAG 2.1 AA accessibility compliance, making it one of the most accessible admin templates available.
.browserslistrc for ES2022 compatibility
AccessibilityManager class (src/ts/accessibility.ts)
prefers-reduced-motion for users with vestibular disorderssrc/scss/_accessibility.scss.sr-only and .sr-only-focusable classeslight/dark)ACCESSIBILITY-COMPLIANCE.md: Comprehensive documentation
// Initialize accessibility features
const a11y = initAccessibility({
announcements: true, // Enable live announcements
skipLinks: true, // Add skip navigation links
focusManagement: true, // Enhanced focus handling
keyboardNavigation: true, // Full keyboard support
reducedMotion: true // Respect motion preferences
});
// Public methods
a11y.announce('Content updated', 'polite');
a11y.focusElement('#main-content');
a11y.trapFocus(modalElement);
a11y.addLandmarks();
Automatic Features (No Action Required):
Optional Enhancements:
<!-- Add accessibility-enhanced form -->
<form class="needs-validation" novalidate>
<div class="mb-3">
<label for="email" class="form-label">Email <span class="required-indicator">*</span></label>
<input type="email" class="form-control" id="email" required>
<div class="invalid-feedback" role="alert"></div>
</div>
</form>
<!-- Use accessible color classes -->
<div class="alert alert-success text-accessible-success">Success message</div>
For Developers:
import { accessibilityUtils } from './adminlte.js'.sr-only, .touch-target, .text-accessible-*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 - Quick development server launchnpm run build - Convenient build command for developmentnpm run production with bundlewatch integration"type": "module" to package.json.eslintrc.json to modern eslint.config.jsoutput: 'static' for proper static site generationMajor version upgrades:
astro: 4.15.12 → 5.10.0eslint: 8.57.1 → 9.29.0[@typescript-eslint](https://github.com/typescript-eslint)/eslint-plugin: 7.18.0 → 8.34.1[@typescript-eslint](https://github.com/typescript-eslint)/parser: 7.18.0 → 8.34.1eslint-config-xo: 0.44.0 → 0.47.0eslint-config-xo-typescript: 4.0.0 → 8.0.1eslint-plugin-astro: 0.34.0 → 1.3.1eslint-plugin-unicorn: 52.0.0 → 59.0.1stylelint-config-twbs-bootstrap: 15.1.0 → 16.1.0Minor/patch updates (50+ packages):
bootstrap: 5.3.3 → 5.3.7sass: 1.78.0 → 1.89.2typescript: 5.6.2 → 5.8.3prettier: 3.3.3 → 3.5.3For Users:
For Developers:
npm start command replaces manual npm run deveslint.config.js (old .eslintrc.json removed)Recommended Actions:
npm install to get latest dependenciesnpm start for developmentnpm run production for production buildsHow can I help you explore Laravel packages today?