Admindek The natural next step from AdminLTE: Bootstrap 5 + vanilla JS, 100+ components, dark/light modes, RTL, 10 color presets. Also for Laravel · Next.js · Angular |
Apex Dashboard 5 dashboard variants, 20+ app pages, 125+ routes, full CRUD — in your backend's native stack. For Next.js · Laravel · Django · Angular |
Zenith Dashboard — Django Achromatic, ultra-minimal design as a ready-to-run Django project: 50+ pages, 6 dashboards, live theme customizer. |
Haze — Nuxt Nuxt 4 + Nuxt UI v4 + Tailwind CSS v4. 92+ pages, 7 layouts, 5 dashboards, RTL, i18n, mock API layer. |
Your avatar here? Become a sponsor
## Contributing Contributions are highly welcome: 1. Install [Node.js](https://nodejs.org/) (LTS) and clone this repository (`master` branch). 2. `npm install`, then `npm start` to run the dev server. 3. Make your changes (run `npm run lint` before committing) and open a PR against `master`. ## License AdminLTE is an open source project by [AdminLTE.io](https://adminlte.io) licensed under [MIT](https://opensource.org/licenses/MIT). AdminLTE.io reserves the right to change the license of future releases. The charts on the demo pages are drawn with [Chart.js](https://www.chartjs.org/) (MIT), loaded from a CDN on the pages that use it — it is not a dependency of the `admin-lte` package. ## Image credits [Pixeden](http://www.pixeden.com/psd-web-elements/flat-responsive-showcase-psd), [Graphicsfuel](https://www.graphicsfuel.com/2013/02/13-high-resolution-blur-backgrounds/), [Pickaface](https://pickaface.net/), [Unsplash](https://unsplash.com/), [Uifaces](http://uifaces.com/), [Unavatar](https://unavatar.io/) --- ### Src Html Components Docs Getting Started (`src/html/components/docs/getting-started.mdx`) 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: ``` /* Detailed source-code truncated for AI context efficiency. */ ``` 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| Name | Hex | Text (v3 rule) | White text | |
|---|---|---|---|---|
{c.name}
|
{c.hex} |
{c.textColor === "white" ? "white" : "dark (#1f2d3d)"} | {c.contrastWhite.toFixed(1)}:1{c.textColor === "white" && c.contrastWhite < 4.5 ? " ⚠︎" : ""} | {c.note} |
| Colour | Default (v3 rule) | With aa |
|---|---|---|
{c.name} {c.hex} |
white text — {c.contrastWhite.toFixed(2)}:1 | black text — {c.contrastBlack.toFixed(2)}:1 |