Convert Figma logo to code with AI

ColorlibHQ logoAdminLTE

AdminLTE - Free admin dashboard template based on Bootstrap 5

45,549
18,173
45,549
0

Top Related Projects

45,595

AdminLTE - Free admin dashboard template based on Bootstrap 5

41,280

Tabler is free and open-source HTML Dashboard UI Kit built on Bootstrap

Free Bootstrap Admin & Dashboard Template Built for AI-Assisted Development

Free admin dashboard template — vanilla JS, SCSS, Vite 8. No Bootstrap, no jQuery.

11,956

Open-source components, blocks, and AI agents designed to speed up your workflow. Import them seamlessly into your favorite tools through Registry and MCPs.

Free Bootstrap 5 admin/dashboard template

Quick Overview

AdminLTE is a popular open-source admin dashboard template and control panel theme built on top of Bootstrap 4. It provides a collection of responsive, reusable, and commonly used components for creating modern, attractive, and consistent user interfaces for web applications.

Pros

  • Extensive collection of pre-built UI components and pages
  • Responsive design that works well on various devices and screen sizes
  • Regular updates and active community support
  • Customizable and easy to integrate with various backend frameworks

Cons

  • Large file size due to the comprehensive nature of the template
  • Learning curve for developers new to the template structure
  • Some components may require additional customization for specific use cases
  • Potential for overuse of similar designs across different projects

Code Examples

  1. Adding a sidebar menu item:
<li class="nav-item">
  <a href="#" class="nav-link">
    <i class="nav-icon fas fa-th"></i>
    <p>
      Simple Link
      <span class="right badge badge-danger">New</span>
    </p>
  </a>
</li>
  1. Creating a card component:
<div class="card">
  <div class="card-header">
    <h3 class="card-title">Card Title</h3>
  </div>
  <div class="card-body">
    Card content goes here
  </div>
  <div class="card-footer">
    Card footer
  </div>
</div>
  1. Implementing a modal dialog:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-default">
  Launch Modal
</button>

<div class="modal fade" id="modal-default">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Default Modal</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal content goes here</p>
      </div>
      <div class="modal-footer justify-content-between">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Getting Started

To get started with AdminLTE, follow these steps:

  1. Download the latest release from the GitHub repository or use a package manager:

    npm install admin-lte@^3.2 --save
    
  2. Include the necessary CSS and JS files in your HTML:

    <link rel="stylesheet" href="path/to/adminlte.min.css">
    <script src="path/to/adminlte.min.js"></script>
    
  3. Use the provided HTML structure and components to build your admin interface. Refer to the documentation for detailed usage instructions and examples.

Competitor Comparisons

45,595

AdminLTE - Free admin dashboard template based on Bootstrap 5

Pros of AdminLTE

  • Well-established and widely used admin dashboard template
  • Extensive documentation and community support
  • Regular updates and maintenance

Cons of AdminLTE

  • Larger file size due to comprehensive features
  • Steeper learning curve for beginners
  • May require more customization for specific use cases

Code Comparison

Both repositories contain the same codebase, as they are the same project. Here's a sample from the main CSS file:

.layout-fixed .main-sidebar {
  bottom: 0;
  float: none;
  left: 0;
  position: fixed;
  top: 0;
}

This code snippet is identical in both repositories, as they are the same project maintained by ColorlibHQ. The comparison requested appears to be between the same repository, so there are no significant differences to highlight in terms of code structure or implementation.

It's worth noting that AdminLTE is a popular open-source admin dashboard template built with Bootstrap, jQuery, and other plugins. It offers a wide range of components and layouts for building responsive, mobile-first projects on the web.

41,280

Tabler is free and open-source HTML Dashboard UI Kit built on Bootstrap

Pros of Tabler

  • More modern and sleek design aesthetic
  • Better responsiveness and mobile-first approach
  • Extensive documentation and examples

Cons of Tabler

  • Smaller community and fewer third-party extensions
  • Less customization options out-of-the-box
  • Steeper learning curve for beginners

Code Comparison

Tabler (SCSS):

.btn {
  @include button-variant($primary, $primary);
}

AdminLTE (CSS):

.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

Both Tabler and AdminLTE are popular admin dashboard templates, but they have different approaches. Tabler focuses on a more modern design and better responsiveness, while AdminLTE offers a wider range of components and customization options.

Tabler uses SCSS for styling, which allows for more flexible and maintainable code. AdminLTE primarily uses CSS, which is simpler but less powerful.

Tabler's documentation is more comprehensive and up-to-date, making it easier for developers to get started. However, AdminLTE has a larger community and more third-party extensions available.

In terms of performance, both templates are well-optimized, but Tabler's mobile-first approach may give it a slight edge on smaller devices.

Ultimately, the choice between Tabler and AdminLTE depends on the specific project requirements and developer preferences.

Free Bootstrap Admin & Dashboard Template Built for AI-Assisted Development

Pros of CoreUI Free Bootstrap Admin Template

  • More modern and sleek design with a focus on clean, minimalist aesthetics
  • Extensive documentation and better organized codebase
  • Includes additional features like Vue.js and React versions

Cons of CoreUI Free Bootstrap Admin Template

  • Smaller community and fewer third-party extensions compared to AdminLTE
  • Less customization options out-of-the-box
  • Steeper learning curve for beginners

Code Comparison

AdminLTE:

<div class="wrapper">
  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <!-- Navbar content -->
  </nav>
  <aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- Sidebar content -->
  </aside>
</div>

CoreUI:

<div class="c-wrapper">
  <header class="c-header c-header-light c-header-fixed">
    <!-- Header content -->
  </header>
  <div class="c-sidebar c-sidebar-dark c-sidebar-fixed c-sidebar-lg-show">
    <!-- Sidebar content -->
  </div>
</div>

Both templates use similar structure, but CoreUI employs more specific class names and a slightly different HTML hierarchy. AdminLTE's code is more straightforward, while CoreUI's approach allows for more granular styling control.

Free admin dashboard template — vanilla JS, SCSS, Vite 8. No Bootstrap, no jQuery.

Pros of Gentelella

  • More modern and visually appealing design
  • Extensive collection of UI elements and widgets
  • Better responsiveness on mobile devices

Cons of Gentelella

  • Steeper learning curve due to more complex structure
  • Heavier in terms of file size and resources
  • Less frequent updates and maintenance

Code Comparison

Gentelella (SCSS):

.nav-md .container.body .right_col {
  padding: 10px 20px 0;
  margin-left: 230px;
}

AdminLTE (CSS):

.content-wrapper {
  min-height: 100%;
  background-color: #f4f6f9;
  z-index: 800;
}

Both repositories offer Bootstrap-based admin templates, but they differ in their approach to layout and styling. Gentelella uses SCSS for more flexible styling, while AdminLTE sticks to plain CSS for simplicity.

Gentelella provides a more feature-rich and visually striking template, but this comes at the cost of increased complexity and resource usage. AdminLTE, on the other hand, offers a more straightforward and lightweight solution that may be easier to customize and integrate into existing projects.

Ultimately, the choice between these two templates depends on the specific needs of your project, your familiarity with Bootstrap and CSS preprocessing, and the level of customization you require.

11,956

Open-source components, blocks, and AI agents designed to speed up your workflow. Import them seamlessly into your favorite tools through Registry and MCPs.

Error generating comparison

Free Bootstrap 5 admin/dashboard template

Pros of Vali Admin

  • Lightweight and faster loading times
  • Modern and clean design with a focus on simplicity
  • Better mobile responsiveness out of the box

Cons of Vali Admin

  • Fewer pre-built components and plugins compared to AdminLTE
  • Smaller community and less frequent updates
  • Limited customization options and documentation

Code Comparison

Vali Admin (SCSS):

.app {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  margin: 0;
}

AdminLTE (SCSS):

.wrapper {
  min-height: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}

Both frameworks use modern CSS techniques, but AdminLTE's approach allows for more complex layouts and better handling of overflow content.

Vali Admin is a good choice for simpler projects that prioritize speed and mobile-first design. AdminLTE offers more features and customization options, making it suitable for larger, more complex admin interfaces. The choice between the two depends on the specific project requirements and the developer's familiarity with each framework.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

AdminLTE — Bootstrap 5 Admin Dashboard

npm version Packagist cdn version License: MIT Discord Invite Netlify Status

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. It fits every screen from small mobile devices to large desktops, and it's MIT-licensed.

Live Demo · Documentation · Framework Editions · Premium Templates

AdminLTE 4 dashboard — light mode AdminLTE 4 dashboard — dark mode

Framework editions

The same AdminLTE 4 dashboard, officially integrated for the framework you know best — you're looking at the HTML / Bootstrap core:

HTML React Next.js Vue Nuxt Angular Laravel Symfony Django ASP.NET Drupal Docs
EditionRepositoryLive demoInstall
HTML / Bootstrap (this repo)AdminLTEthemes/v4npm install admin-lte
React & Next.js — 30+ typed components, RSC-ready, ⌘K paletteadminlte-reactthemes/next-reactsee repo
Vue 3 & Nuxt — 45+ typed components, composables, SSR-safe themingadminlte-vuethemes/vue-nuxtsee repo
Laravel — Blade components, config-driven menu, auth scaffoldingadminlte-laravellaravel.adminlte.iocomposer require colorlibhq/adminlte-laravel
Django — reusable app, menu filter pipeline, themed adminadminlte-djangodjango.adminlte.iopip install django-adminlte4
Symfony — Twig Components, AssetMapper, config-driven menu, EasyAdmin themeadminlte-symfonysee repocomposer require colorlibhq/adminlte-symfony
Angular 22 — 44 standalone signal components, dark mode, ⌘K paletteadminlte-angularsee reponpm i @adminlte/angular
ASP.NET Core (.NET 10) — Blazor components + MVC/Razor Pages Tag Helpersadminlte-aspnetsee repodotnet add package ColorlibHQ.AdminLTE.AspNetCore
Drupal — admin theme for Drupal 10.3+/11, themed admin UIadminlte-drupalsee reposee repo
Docs — guides, components, and API reference for every editiondocs.adminlte.iodocs.adminlte.io—

Every edition ships the full AdminLTE 4 design — Bootstrap 5.3, dark mode, RTL — with idiomatic integrations for its stack (components, routing, auth, theming).

Quick start

CDN — no build step:

<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>

npm:

npm install admin-lte@4

Composer:

composer require almasaeed2010/adminlte

Then start from the Getting Started guide or copy one of the demo pages.

Developing AdminLTE itself

  1. Install dependencies: npm install
  2. Start the dev server: npm start (opens http://localhost:3000 with live reload)
  3. Build: npm run build — or npm run production for the full lint + optimize + bundlewatch pipeline
All npm scripts
  • npm start — development server with file watching
  • npm run build — build all assets for development
  • npm run production — full production build with linting and bundlewatch
  • npm run lint — run all linters (JS, CSS, docs, lockfile)
  • npm run css — build CSS only
  • npm run js — build JavaScript only

What's new in v4

The v4 line is a ground-up rewrite on Bootstrap 5.3 with no jQuery: 18 new demo pages (Calendar, Kanban, Chat, File Manager, Mailbox, Wizard, Tabulator data tables, and more), a documentation overhaul, and major dependency upgrades. See the CHANGELOG for full details.

New in 4.3

  • Sidebar search — a new SidebarSearch plugin filters the menu as you type, expanding whatever submenu holds a match and restoring the menu exactly as it was when cleared. Paired with a navbar search in the app header.
  • Ribbons — corner banners (.ribbon-wrapper + .ribbon) in three sizes, mirrored automatically in RTL, with the clip following the card's corner radius.
  • Social & post widgets — .user-block, .post, .widget-user, .widget-user-2 and .description-block, laid out with grid and flex.
  • Three new demo pages — Gallery (filterable media library, no image library required), Search Results (typed results with a refine panel), and Ribbons.
  • Nav tabs, modals and offcanvas added to the General UI Elements showcase.
  • Card and Miscellaneous docs pages, plus a language switcher recipe — every component that ships CSS now has a reference page.
Highlights

18 new demo pages

  • Apps: Calendar (FullCalendar), Kanban (SortableJS), Chat, File Manager, Projects, Mailbox (Inbox / Read / Compose)
  • Forms: Wizard (4-step with validation)
  • Tables: Data Tables (Tabulator — jQuery-free)
  • Pages: Profile, Settings, Invoice, Pricing, FAQ
  • Errors: 404, 500, Maintenance

Documentation overhaul

  • New pages: Getting Started, Customization & Theming, RTL Support, Migration from v3, Layout Blueprint, Recipes, Deployment & Performance, Recommended Integrations, JavaScript Plugins Overview
  • Rewritten Introduction with four labelled install paths (CDN / npm / source / Composer)
  • FAQ rebuilt with hero, live search, section chips, and an accordion of 23 questions
  • Split sidebar navigation: dashboard demo and docs each have their own nav

Major dependency upgrades

  • ESLint 10, TypeScript 6, Stylelint 17, Astro 6.3, Bootstrap 5.3.8, Node 22 LTS in CI
  • npm install runs clean with 0 vulnerabilities
Breaking changes from v3
  • Class renames: .wrapper → .app-wrapper, .main-header → .app-header, .main-sidebar → .app-sidebar, .content-wrapper → .app-main
  • Data attributes: data-toggle → data-bs-toggle, data-widget="pushmenu" → data-lte-toggle="sidebar", data-widget="treeview" → data-lte-toggle="treeview"
  • Dark mode: .dark-mode body class → data-bs-theme="dark" attribute (Bootstrap 5.3 native)
  • jQuery no longer required; plugins are vanilla TypeScript
  • The bundled plugins/ folder is gone — every v3 jQuery widget has a documented vanilla-JS successor (replacement table: Select2 → Tom Select, DataTables → Tabulator, Summernote → Quill, …)
  • The v3 extra colours (.bg-navy, .bg-teal, the sidebar skins, …) live in opt-in stylesheets: dist/css/adminlte-colors.css — fourteen redesigned colours, every one readable with white text, 17 skin presets, plus a one-line hook for your brand colour — or dist/css/adminlte-colors-v3.css, the 18 AdminLTE 3 colours exactly as they were. Either sheet also lets you make one of them Bootstrap's primary — <html data-lte-primary="teal"> recolours buttons, links, pagination and form focus (Colors docs, live demo). Nothing is added to adminlte.css.

See the dedicated Migration from v3 guide.

Premium templates

AdminLTE will always be free and open source. When a project needs more — app-ready pages, framework-native codebases, dedicated support — our team hand-picks premium dashboards at adminlte.io/premium, including editions built for the same stacks AdminLTE integrates with:

Admindek — feature-rich Bootstrap 5 dashboard with dark mode
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 — admin template available for Next.js, Laravel, Django and 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 — ultra-minimal admin dashboard, Django edition
Zenith Dashboard — Django
Achromatic, ultra-minimal design as a ready-to-run Django project: 50+ pages, 6 dashboards, live theme customizer.
Haze — Nuxt 4 admin dashboard with 92+ pages and 5 dashboards
Haze — Nuxt
Nuxt 4 + Nuxt UI v4 + Tailwind CSS v4. 92+ pages, 7 layouts, 5 dashboards, RTL, i18n, mock API layer.

View all premium templates →

Browser & platform support

AdminLTE supports the latest versions of all modern browsers (Chrome, Firefox, Safari, Edge) via Bootstrap 5.3.8. The build scripts run cross-platform — Windows (CMD, PowerShell, Git Bash), macOS and Linux — using cross-platform npm utilities throughout.

Security & production deployment

AdminLTE is a UI template. Deploy only the compiled production assets (dist/js/adminlte.min.js, dist/css/adminlte.min.css) and your own application files — never node_modules/, the demo HTML pages, or the src/ directory.

About CVE-2021-36471: this CVE is disputed and does not represent a vulnerability in AdminLTE — it refers to demo pages being accessible when example files are incorrectly deployed to production. AdminLTE v4 cleanly separates development demos from production assets.

For detailed guidelines, authentication requirements, and best practices, see SECURITY.md.

Sponsorship

Support AdminLTE development by becoming a sponsor or donor.

Sponsor on GitHub    Donate via PayPal

Our sponsors

User avatar: spizzo14   User avatar: tomhappyblock   User avatar: stefanmorderca   User avatar: tito10047   User avatar: sitchi   User avatar: npreee   User avatar: isaacmorais  

Your avatar here? Become a sponsor

Contributing

Contributions are highly welcome:

  1. Install Node.js (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 licensed under MIT. AdminLTE.io reserves the right to change the license of future releases.

Image credits

Pixeden, Graphicsfuel, Pickaface, Unsplash, Uifaces, Unavatar

NPM DownloadsLast 30 Days