Convert Figma logo to code with AI

ColorlibHQ logoAdminLTE

AdminLTE - Free admin dashboard template based on Bootstrap 5

45,256
18,267
45,256
152

Top Related Projects

45,255

AdminLTE - Free admin dashboard template based on Bootstrap 5

40,301

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

Free Bootstrap Admin & Dashboard Template

Free Bootstrap 5 Admin Dashboard Template

11,231

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

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.

40,301

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

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 Bootstrap 5 Admin Dashboard Template

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

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 Discord Invite Netlify Status

AdminLTE is a fully responsive administration template. Based on Bootstrap 5 framework and also the JavaScript plugins. Highly customizable and easy to use. Fits many screen resolutions from small mobile devices to large desktops.

What's New in v4.0.0-rc6

Security & Feature Release - Important security fixes and new sidebar persistence feature:

  • Security Fixes - Resolved 4 vulnerabilities (XSS in Astro, auth bypass, unsanitized attributes)
  • Sidebar State Persistence - Sidebar now remembers collapsed/expanded state across page refreshes
  • Node.js 22 - Updated all GitHub Actions workflows to Node.js 22 LTS (supported until 2027)
  • Latest Dependencies - 15+ packages updated including Astro 5.16.4, Prettier 3.7.4, Rollup 4.53.3
  • CI/CD Improvements - Updated CodeQL actions to v3, fixed release workflow bugs

Key Improvements:

  • ✅ Zero security vulnerabilities - all npm audit issues resolved
  • ✅ Sidebar state persists in localStorage (configurable, SSR-safe, mobile-aware)
  • ✅ GitHub Actions use Node.js 22 (Active LTS until April 2027)
  • ✅ CodeQL security scanning updated to latest v3 actions
  • ✅ Release workflow fixed for proper asset packaging

Install the latest:

npm install admin-lte@4.0.0-rc6

See the CHANGELOG.md for complete details.

Looking for Premium Templates?

AdminLTE.io just opened a new premium templates page. Hand picked to ensure the best quality and the most affordable prices. Visit https://adminlte.io/premium for more information.

"AdminLTE Presentation"

AdminLTE has been carefully coded with clear comments in all of its JS, SCSS and HTML files. SCSS has been used to increase code customizability.

Quick start

Development

To start developing with AdminLTE:

  1. Install dependencies: npm install
  2. Start development server: npm start (opens browser at http://localhost:3000)
  3. Start coding! Files auto-compile and refresh on changes

Production Build

To build for production:

  1. Full production build: npm run production (includes linting and optimization)
  2. Quick build: npm run build (faster for development/testing)

Available Scripts

  • npm start - 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

Browser Support

AdminLTE supports all modern browsers with the latest Bootstrap 5.3.7:

  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)

Platform Support

AdminLTE v4 build scripts work cross-platform:

  • Windows - Command Prompt, PowerShell, Git Bash
  • macOS - Terminal, iTerm2
  • Linux - Bash, Zsh, and other Unix shells

All npm scripts use cross-platform utilities to ensure consistent behavior across different operating systems.

Security & Production Deployment

Important Security Notice

AdminLTE is a UI template - when deploying to production, follow these critical guidelines:

What to Deploy:

  • Only compiled production assets: dist/js/adminlte.min.js and dist/css/adminlte.min.css
  • Your application-specific files

What NOT to Deploy:

  • node_modules/ directory
  • Demo/example HTML files (index.html, index2.html, index3.html, etc.)
  • Source files (src/ directory)
  • Development configuration files

CVE-2021-36471 Notice: This CVE is disputed and does not represent a vulnerability in AdminLTE. It refers to demo pages being accessible when developers incorrectly deploy example files to production. AdminLTE v4 has a clear separation between development demos and production assets. See SECURITY.md for complete details.

Production Build:

npm run production  # Builds optimized assets in dist/

For detailed security 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

  • Highly welcome.
  • For your extra reference check AdminLTE v4 Contribution Guide
  • First thing first, you should have bit knowledge about NodeJS.
  • Github Knowledge.
  • Install NodeJS LTS version.
  • Clone this Repository to your machine and change to master branch.
  • Go to Cloned Folder.
  • In cli/bash run npm install it will install dependency from package.json.
  • After installation completes, run npm start
  • Cool, Send your changes in PR to master branch.

License

AdminLTE is an open source project by AdminLTE.io that is licensed under MIT. AdminLTE.io reserves the right to change the license of future releases.

Image Credits

NPM DownloadsLast 30 Days