# AdminLTE 4: Bootstrap 5 admin dashboard template without jQuery

> AdminLTE is an MIT-licensed admin dashboard template built on Bootstrap 5.3 with vanilla JavaScript. This article covers what it ships, how to install it from npm, Composer or CDN, and where the template approach stops being the right choice.

**ColorlibHQ/AdminLTE** — AdminLTE - Free admin dashboard template based on Bootstrap 5. AdminLTE, Bootstrap 5 Admin Dashboard AdminLTE** is the most popular open-source admin dashboard template, fully responsive, built on **Bootstrap 5.3** with vanilla JavaScript (no jQuery), highly customizable, and easy to use.

- Repository: https://github.com/ColorlibHQ/AdminLTE
- Website: https://adminlte.io
- Stars: 45,623 · Forks: 18,153
- Language: Astro
- License: MIT
- Published: 2026-08-08 · Updated: 2026-08-18 · Language: en
- Canonical page: https://hysenlabs.com/projects/colorlibhq-adminlte

## How the template is put together

The mechanism is a Bootstrap theme with a plugin layer on top. AdminLTE compiles Sass into dist/css and TypeScript into dist/js, and the package.json exports map exposes both the compiled artifacts and the Sass source. Three entry points matter: dist/css/adminlte.css for styles, dist/js/adminlte.esm.js as the ES module build, and dist/js/adminlte.min.js as the CommonJS/UMD build. The types field points at dist/js/types/adminlte.d.ts, so TypeScript consumers get declarations even though the template itself is markup-first.

Because the styling is Sass, theming is a variable override exercise rather than a CSS-in-JS problem. The css-compile script in package.json runs sass with --load-path="node_modules" against src/scss/, which means a project that installs admin-lte can import the source partials and change Bootstrap variables before compilation. That is the real customisation path. The prebuilt dist/css files are for people who do not want a Sass step at all.

On the JavaScript side, the README describes plugins rather than a framework. The 4.3 release notes, quoted in the README, list a SidebarSearch plugin that filters the menu as you type, expands whichever submenu holds a match, and restores the menu exactly as it was when the field is cleared. Ribbons are CSS-only: a .ribbon-wrapper plus .ribbon, in three sizes, mirrored automatically in RTL. The RTL support is generated at build time by a PostCSS pass (the css-rtl script) that emits .rtl.css files alongside the LTR ones, so RTL is a build artifact, not a runtime toggle.

The repository layout confirms the tooling: vitest.config.ts and a tests/ directory for the TypeScript plugins, eslint.config.js and .stylelintrc.json for linting, tsconfig.json and tsconfig.types.json for the declaration output, and a docs/ directory that feeds the documentation site. Node >= 20 is required by the engines field.

## Installing AdminLTE 4 and building a first page

There are three documented install paths, and the right one depends on whether you have a build step. The CDN route needs no tooling at all. The README gives this exact pair of tags:

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

Paste those into the head of an HTML file and the AdminLTE styles and plugin JavaScript are available. Nothing else is downloaded, and the README does not document a Subresource Integrity hash for these URLs, so if you care about that you will need to compute it yourself.

If you have a Node build, install from npm. The README specifies version 4 explicitly:

```bash
npm install admin-lte@4
```

After that, import the stylesheet from your own Sass or CSS entry, or reference the compiled file from node_modules. The exports map in package.json allows both: the "sass" condition resolves to src/scss/adminlte.scss and the "style" condition to dist/css/adminlte.css, so a bundler that understands those conditions picks the source, and one that does not falls back to the compiled CSS.

PHP projects use Composer instead. The README lists the package as almasaeed2010/adminlte:

```bash
composer require almasaeed2010/adminlte
```

Whichever path you take, the README's next instruction is the same: start from the Getting Started guide at adminlte.io/themes/v4/docs/introduction.html, or copy one of the demo pages. Copying a demo page is the fastest way to see the structure, because the demo pages already include the sidebar, navbar and content wrapper markup that the CSS expects. The README does not document a CLI generator that scaffolds a page for you.

If you are working on AdminLTE itself rather than with it, the README gives three steps: npm install, then npm start, which opens http://localhost:3000 with live reload, then npm run build, or npm run production for what the README calls the full lint, optimize and bundlewatch pipeline.

## Framework editions and the install path people search for

The single most consequential design decision in this project is that the HTML core is not the only distribution. The README maintains a table of official editions, each in its own repository: React and Next.js (30+ typed components, RSC-ready, a command palette), Vue 3 and Nuxt (45+ typed components, composables, SSR-safe theming), Laravel (Blade components, config-driven menu, auth scaffolding), Django (reusable app, menu filter pipeline, themed admin), Symfony (Twig Components, AssetMapper, EasyAdmin theme), Angular 22 (44 standalone signal components), ASP.NET Core on .NET 10 (Blazor components plus MVC and Razor Pages Tag Helpers) and Drupal 10.3+/11.

Each edition has its own install command, and they are not interchangeable. The ones the README spells out are:

```bash
composer require colorlibhq/adminlte-laravel
pip install django-adminlte4
composer require colorlibhq/adminlte-symfony
npm i @adminlte/angular
dotnet add package ColorlibHQ.AdminLTE.AspNetCore
```

This is the answer to the searches about using AdminLTE in Laravel, Django, PHP or ASP.NET MVC. The HTML repository you are reading about is the wrong package for those frameworks; the framework-specific repository is the right one, and the README says each ships the full AdminLTE 4 design with idiomatic integrations for its stack. The React and Vue rows in that table say "see repo" for install rather than giving a command, and the Drupal row does the same, so the README does not document those install steps here.

The trade-off is fragmentation. A bug in the sidebar behaviour may live in the HTML core, in the framework wrapper, or in the boundary between them, and the README does not describe how fixes propagate from the core to the editions. If you pick an edition, check that repository's own release cadence rather than assuming it tracks the core's.

## Where the template approach breaks down

AdminLTE gives you HTML, CSS and small plugins. It does not give you an application. There is no router, no state container, no data-fetching layer and no form validation framework in the core. Every list you render, every modal you open and every menu item you highlight is code you write. For a server-rendered admin panel that is exactly right, because the server already owns routing and state. For a client-heavy application it means rebuilding the parts a component library would have handed you.

The plugin layer is deliberately thin, and the README describes it that way. SidebarSearch filters the DOM as you type. Ribbons are CSS. The data table demo uses Tabulator, which is a separate dependency, not something AdminLTE implements. The calendar demo uses FullCalendar and the Kanban demo uses SortableJS; the README names both as third-party libraries. So a page that looks like it ships a rich widget may in fact be demonstrating an integration you have to install and configure separately. Read the demo's script tags before assuming the feature is included.

There is also a version trap. The search data shows steady interest in AdminLTE 3 and AdminLTE 2. Those are the jQuery-era lines, and v4 is a rewrite with jQuery removed. Tutorials, Stack Overflow answers and themes written for v3 will not map cleanly onto v4 markup and plugin APIs. If you are following an older guide, confirm which major version it targets before copying snippets.

Finally, the README does not document a migration path from v3 to v4. The CHANGELOG is referenced for full details of the rewrite, but the README itself gives no upgrade guide, no compatibility shim and no list of renamed classes. Budget for a manual port if you are moving an existing v3 dashboard.

## Alternatives and how they differ

The nearest alternative for a Bootstrap-based admin UI is to use Bootstrap 5.3 directly and write the dashboard chrome yourself. The difference is scope, not philosophy: AdminLTE is Bootstrap plus a prebuilt sidebar, navbar, card variants, widget classes and demo pages, compiled from its own Sass tree. Starting from plain Bootstrap means you own the layout CSS and the sidebar collapse behaviour, but you also avoid inheriting AdminLTE's class names and its release cycle. For a small panel with three screens, plain Bootstrap is less to carry.

On the component-library side, the honest comparison is with the framework editions of AdminLTE itself rather than an outside project. The README positions adminlte-react and adminlte-vue as the same design with typed components, routing-aware integration and SSR-safe theming. If you are in React or Vue, choosing the HTML core means reimplementing what those repositories already provide. That is the clearest fork in the road this project presents.

For teams that want a full application framework rather than a template, the relevant comparison is any admin generator that owns the data layer as well as the view. AdminLTE does not compete there and the README does not claim it does. The README's framing is consistent throughout: a template, plus per-framework integrations for people who want components.

One practical note on the paid side: the README links to premium templates from the same vendor. Those are separate products. Nothing in the repository or the README suggests the MIT core depends on them.

## Licence, maintenance and the cost of upgrading

The licence is MIT, stated in the README and in the LICENSE file at the repository root, and package.json declares "license": "MIT". For most adopters that means you can use, modify and redistribute the template, including in commercial products, provided you keep the copyright notice and permission notice. That is a summary of what the repository states, not legal advice; if your organisation has rules about attribution in distributed front-end assets, have someone read the LICENSE text rather than this paragraph.

The npm package name is admin-lte and the Composer package is almasaeed2010/adminlte. Those are different namespaces with different versioning, so a project that pulls both should check that the versions line up. The README does not state that they are released in lockstep.

Maintenance signals are concrete. The repository is not archived. The last push was on 2026-08-26, and the recent releases are v4.9.1 and v4.9.0 on that same date, with v4.8.5 on 2026-08-20. That is a tight release cadence in the weeks before the last push, and the version numbers are patch-level, which suggests incremental fixes rather than a pending rewrite.

Upgrade cost depends on how you consumed the package. If you use the CDN URLs or the prebuilt dist files, upgrading is a version bump in a URL or a lockfile, and your risk is concentrated in class name or plugin behaviour changes. If you import src/scss/adminlte.scss and override variables, an upstream change to a partial or a variable name can break your build, and you will find out at compile time rather than runtime, which is the better failure mode. The README does not document a deprecation policy or a support window for older v4 minors, so pin the version you have tested and read the CHANGELOG before moving.

## Conclusion

Adopt AdminLTE if you are building a Bootstrap-based back office and want the markup, Sass sources and demo pages in hand rather than a component library you have to wire yourself. Skip it if you need typed components with routing and state built in: the React, Vue, Angular and other editions exist for that, and this repository is the HTML core. Before committing, run npm install admin-lte@4 and inspect the exported paths in package.json (dist/css/adminlte.css, dist/js/adminlte.esm.js, src/scss/adminlte.scss) to confirm they match your build pipeline, then read ACCESSIBILITY-COMPLIANCE.md, which the README does not summarise.

## FAQ

### What is AdminLTE?

AdminLTE is a free, MIT-licensed admin dashboard template. The README describes it as fully responsive, built on Bootstrap 5.3 with vanilla JavaScript and no jQuery, and easy to customize.

### How do I install AdminLTE?

The README gives three paths: link the CDN files from cdn.jsdelivr.net, run npm install admin-lte@4, or run composer require almasaeed2010/adminlte. After that it points you at the Getting Started guide or a demo page to copy.

### How do I use AdminLTE 4?

Install the package, then either copy one of the demo pages or follow the Getting Started guide at adminlte.io/themes/v4/docs/introduction.html. The demo pages already contain the sidebar, navbar and content wrapper markup the CSS expects.

### How do I use AdminLTE in Laravel?

Use the Laravel edition rather than the HTML core. The README lists adminlte-laravel, installed with composer require colorlibhq/adminlte-laravel, and describes it as shipping Blade components, a config-driven menu and auth scaffolding.

### How do I use AdminLTE in Django?

The README lists a separate Django edition, installed with pip install django-adminlte4. It is described as a reusable app with a menu filter pipeline and a themed admin.

### What are some alternatives to AdminLTE?

The README does not compare AdminLTE to outside projects. It does present its own framework editions, adminlte-react, adminlte-vue and adminlte-angular among them, as the same design with typed components for those stacks, which is the closest thing to an alternative it documents.

## Sources

- [Official documentation](https://adminlte.io)
- [Official README](https://github.com/ColorlibHQ/AdminLTE#readme)
- [Project repository](https://github.com/ColorlibHQ/AdminLTE)
- [Release notes](https://github.com/ColorlibHQ/AdminLTE/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/colorlibhq-adminlte