Configuration

Build AdminLTE 4 from source to customize it: clone the repo, install dependencies, override Bootstrap and AdminLTE SCSS variables, and recompile. The toolchain is npm-based — Sass for CSS, Rollup + TypeScript for JS, Astro for the demo site.

Clone and install

git clone https://github.com/ColorlibHQ/AdminLTE.git
cd AdminLTE
npm install

npm scripts

The scripts in package.json cover development, building, and the full production pipeline:

Script	What it does
`npm start` / `npm run dev`	Dev server with file watching; opens the demo on `http://localhost:3000` with live reload.
`npm run build`	Clean then compile all assets (CSS, JS, demo site) for development.
`npm run production`	Full pipeline: clean, lint, compile, and `bundlewatch` size check. Run this before shipping.
`npm run css`	Build CSS only — compile, autoprefix, generate RTL, and minify.
`npm run js`	Build JavaScript only — Rollup/TypeScript compile, then Terser minify.
`npm run lint`	Run every linter in parallel — ESLint, Stylelint, Astro check, lockfile-lint.
`npm run watch`	Watch SCSS, TypeScript, and assets and rebuild on save.

The build runs cross-platform — Windows (CMD, PowerShell, Git Bash), macOS, and Linux — thanks to cross-platform npm utilities throughout. AdminLTE requires Node.js (LTS recommended).

How the SCSS is organized

The entry point is src/scss/adminlte.scss. It imports Bootstrap's functions, then AdminLTE's Bootstrap-variable overrides, then the rest of Bootstrap, then AdminLTE's own variables and parts:

@import "bootstrap/scss/functions";
@import "bootstrap-variables"; // AdminLTE's Bootstrap overrides
@import "bootstrap/scss/variables";
// ... rest of Bootstrap ...
@import "variables";           // AdminLTE variables (_variables.scss)
@import "variables-dark";
@import "mixins";
@import "parts/core";
@import "parts/components";
@import "parts/extra-components";
@import "parts/pages";
@import "parts/miscellaneous";

The two files you'll override most:

src/scss/_bootstrap-variables.scss — Bootstrap's own variables (colors, fonts, spacing scale, breakpoints).
src/scss/_variables.scss — AdminLTE-specific variables (sidebar width, header height, transitions).

Overriding variables

All variables use Sass !default, so the cleanest approach in your own project is to set overrides before importing AdminLTE, then recompile. Create a wrapper SCSS file:

// my-theme.scss

// 1. Your overrides FIRST
$primary:           #6610f2;
$lte-sidebar-width: 280px;
$border-radius:     .25rem;

// 2. Then import AdminLTE (which imports Bootstrap)
@import "node_modules/admin-lte/src/scss/adminlte";

Common AdminLTE variables and their defaults:

$lte-sidebar-width:     250px;   // collapses to ~70px mini state
$lte-sidebar-breakpoint: lg;     // sidebar goes off-canvas below this
$lte-sidebar-padding-x: .5rem;
$lte-transition-speed:  .3s;
$lte-transition-fn:     ease-in-out;

Recompiling

If you cloned the repo, the pipeline is already wired:

npm run css            # one-off build to dist/css/
npm run watch-css-main # rebuild on save during development

If you use AdminLTE as a dependency, point your bundler at the SCSS source so your variable overrides take effect:

// Vite / Rollup / Webpack entry
import "admin-lte/src/scss/adminlte.scss"

Keep the Bootstrap source in src/scss/bootstrap/ (pulled from the bootstrap npm dependency) unchanged. Put your customizations in your own partial and override variables with !default ordering — this keeps you upgrade-safe.

For non-structural retheming with no build step at all (brand colors, body background, radius), override Bootstrap's CSS custom properties at runtime instead — see Theming.

AdminLTE 4 · HTML port Edit on GitHub