Installation

There are three ways to add AdminLTE 4 to a project: download a release, install the admin-lte npm package, or load the prebuilt files from the jsDelivr CDN. The CDN path needs no build step at all.

Option 1 — jsDelivr CDN (no build)

The fastest way to start. Reference the prebuilt CSS and JS straight from the CDN — nothing to install. Pin a version for reproducibility:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@4.2.0/dist/css/adminlte.min.css">
<script src="https://cdn.jsdelivr.net/npm/admin-lte@4.2.0/dist/js/adminlte.min.js"></script>

Use @4 instead of @4.2.0 to always track the latest 4.x release. The script tag loads the classic UMD bundle — no build step, no module system required.

Option 2 — npm

For projects with a bundler (Vite, Webpack, Rollup) or that pull AdminLTE in as a dependency:

npm install admin-lte

Since 4.1.0, bootstrap (^5.3.8) is a peer dependency, so npm installs it alongside automatically. The package ships the prebuilt CSS/JS, an ESM bundle, TypeScript declarations, and the SCSS source.

Use as a module

The package has a full exports map: import components straight from admin-lte and your bundler resolves the ESM build (dist/js/adminlte.esm.js). TypeScript declarations ship under dist/js/types/ and are wired up via the types field, so you get full typings in Vite/webpack with no @types package:

import 'admin-lte/dist/css/adminlte.min.css'
import { PushMenu } from 'admin-lte'

PushMenu.getOrCreateInstance(document.querySelector('.app-sidebar'))

Deep imports into ./dist/* and ./src/scss/* are allowed too — reference the prebuilt files directly, or import the SCSS source to customize variables (see Configuration):

// Prebuilt CSS + classic UMD bundle (self-initialising, no imports needed)
import 'admin-lte/dist/css/adminlte.min.css'
import 'admin-lte/dist/js/adminlte.min.js'

// Or the SCSS source, for variable overrides
import 'admin-lte/src/scss/adminlte.scss'

Compiling the SCSS source yourself? Bootstrap is no longer vendored into the package — add node_modules to the Sass load path (--load-path=node_modules or loadPaths) so @imports of the Bootstrap peer resolve.

Option 3 — Download a release

Download a release archive from GitHub Releases (or clone the repo) and copy the dist/css/ and dist/js/ folders into your project. This is the right choice when you want the full demo pages and assets to start from.

Minimal HTML page

AdminLTE depends on Bootstrap 5.3 (which depends on Popper for dropdowns/tooltips), and the demos use Bootstrap Icons plus OverlayScrollbars for the sidebar scroller. A complete, working starting page:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>AdminLTE 4</title>

    <!-- Bootstrap Icons -->
    <link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
    <!-- OverlayScrollbars (sidebar scroller) -->
    <link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/styles/overlayscrollbars.min.css">
    <!-- AdminLTE (includes Bootstrap CSS) -->
    <link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/admin-lte@4.2.0/dist/css/adminlte.min.css">
  </head>
  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
    <div class="app-wrapper">
      <!-- header, sidebar, main, footer go here -->
    </div>

    <!-- Scripts at the end of body, in this order -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/browser/overlayscrollbars.browser.es6.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/admin-lte@4.2.0/dist/js/adminlte.min.js"></script>
  </body>
</html>

Script order matters. Load Popper, then Bootstrap, then AdminLTE — AdminLTE must run after Bootstrap. The AdminLTE bundle waits for DOMContentLoaded before wiring its data API, so adding defer is safe. Never use async: the script could execute before its dependencies have parsed.

Required dependencies

Dependency	Version	Required?
Bootstrap	5.3.x	Yes (bundled in AdminLTE CSS; JS loaded separately)
@popperjs/core	2.11.x	Yes — Bootstrap dropdowns / tooltips / popovers
bootstrap-icons	1.13.x	Recommended — icons used throughout the demos
overlayscrollbars	2.11.x	Optional — styled sidebar scrollbar

Next step: build from source and customize — see Configuration.

AdminLTE 4 · HTML port Edit on GitHub