AdminLTE is an HTML template — there's no build step required to use it. This page gets you to a working dashboard in about ten minutes, without npm, without a build pipeline, without learning Astro. If you're integrating AdminLTE into a real project, the [Installation](introduction.html) page covers npm, Composer, and source-build workflows. ##### 1. Grab the CDN snippets Copy these tags into the `` of a new HTML file. They pull AdminLTE, Bootstrap 5.3, Popper, OverlayScrollbars, and Bootstrap Icons from jsDelivr — no install needed. ```html ``` And these just before ``: ```html ``` ##### 2. The minimum viable layout This is the smallest AdminLTE page that still feels like AdminLTE — a header, a collapsible sidebar, and a main content area. Drop it between the CSS and JS tags above: ```html

Hello, AdminLTE

Welcome
Edit this file to start building your dashboard.
``` Open it in a browser. The hamburger button at the top-left collapses the sidebar — that's AdminLTE's [PushMenu](javascript/pushmenu.html) plugin working out of the box, wired by `data-lte-toggle="sidebar"`. ##### 3. What's actually happening The four classes that do the heavy lifting: | Class | What it does | |---|---| | `app-wrapper` | The CSS grid root — defines header / sidebar / main / footer regions | | `app-header` | Stuck to the top of the viewport when `layout-fixed` is on the body | | `app-sidebar` | Collapsible side rail. Add `sidebar-expand-lg` to body to control breakpoint | | `app-main` | Scrollable content region — everything else lives here | The [Layout](layout.html) page covers the full wrapper structure and the responsive options. ##### 4. Add a working JavaScript widget AdminLTE ships seven JavaScript plugins. All of them are wired via `data-lte-*` attributes — no JavaScript code needed. Drop this in the content area to see the card-widget plugin in action (try the buttons in the card header): ```html
Collapsible card
Click the minus icon to collapse; the X to remove.
``` ##### 5. Where to go next You now have a working AdminLTE page. From here: - **Make it pretty** → [Customization & Theming](customization.html) — change colors, fonts, and spacing via SCSS variables or CSS custom properties. - **Make it functional** → [JavaScript Plugins](javascript/layout.html) — full reference for all seven plugins. - **Make it dark** → [Color Mode](color-mode.html) — light/dark/auto toggle. - **Make it international** → [RTL Support](rtl.html) — right-to-left layouts for Arabic, Hebrew, Persian, etc. - **Add real widgets** → [Recommended Integrations](integrations.html) — date pickers, multi-selects, charts, rich text editors. AdminLTE keeps its dep tree lean; this page tells you which third-party libraries to drop in. If you're upgrading an existing AdminLTE 3 project, see the [Migration from v3](migration.html) guide for breaking changes.