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.0.2/dist/css/adminlte.min.css">
<script src="https://cdn.jsdelivr.net/npm/admin-lte@4.0.2/dist/js/adminlte.min.js"></script>

Use @4 instead of @4.0.2 to always track the latest 4.x release.

Option 2 — npm

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

npm install admin-lte@4

The package ships both compiled assets and SCSS source. Reference the prebuilt CSS/JS from node_modules/admin-lte/dist/, or import the SCSS source to customize variables (see Configuration):

// Prebuilt CSS + JS
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'

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.0.2/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.0.2/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