or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

cards.mdindex.mdlayout-navigation.mdplugins.mdsearch.mdstyling.mdutilities.mdwidgets.md
tile.json

tessl/npm-admin-lte

Comprehensive Bootstrap 4-based administration template framework providing developers with a complete responsive admin interface solution.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/admin-lte@3.2.x

To install, run

npx @tessl/cli install tessl/npm-admin-lte@3.2.0

index.mddocs/

AdminLTE

AdminLTE is a comprehensive Bootstrap 4-based administration template framework that provides developers with a complete responsive admin interface solution. It features an extensive collection of pre-built UI components including navigation menus, forms, tables, charts, widgets, and layout elements, all designed with consistent styling and behavior patterns. The framework includes comprehensive JavaScript functionality and integrates popular third-party libraries to provide rich interactive features.

Package Information

  • Package Name: admin-lte
  • Package Type: npm
  • Language: JavaScript/TypeScript (with SCSS)
  • Installation:
    • npm: npm install admin-lte@^3.2 --save
    • Yarn: yarn add admin-lte@^3.2
    • Composer: composer require "almasaeed2010/adminlte=~3.2"
    • Git: git clone https://github.com/ColorlibHQ/AdminLTE.git

Core Imports

AdminLTE is distributed as a UMD module that works with ES6 imports, CommonJS, and browser globals:

// ES6 import (requires bundler like Webpack/Rollup)
import { 
  CardRefresh, CardWidget, ControlSidebar, DirectChat, Dropdown,
  ExpandableTable, Fullscreen, IFrame, Layout, PushMenu, 
  SidebarSearch, NavbarSearch, Toasts, TodoList, Treeview 
} from 'admin-lte';
// CommonJS require
const { CardWidget, PushMenu } = require('admin-lte');
// Browser global (after including script tag)
const { CardWidget } = window.adminlte;

For browser usage:

<script src="node_modules/admin-lte/dist/js/adminlte.min.js"></script>
<link rel="stylesheet" href="node_modules/admin-lte/dist/css/adminlte.min.css">

Via CDN:

<!-- Required dependencies -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>

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

<!-- Font Awesome icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css">

Basic Usage

AdminLTE components can be used programmatically or through data attributes:

// Programmatic initialization
import { CardWidget } from 'admin-lte';
const cardElement = document.querySelector('.card');
const cardWidget = new CardWidget(cardElement, {
  animationSpeed: 'fast',
  collapseTrigger: '[data-card-widget="collapse"]'
});

// jQuery plugin usage (if jQuery is available)
$('.card').CardWidget({
  animationSpeed: 'fast'
});
<!-- Data attribute initialization (automatic) -->
<div class="card">
  <div class="card-header">
    <h3 class="card-title">Card Title</h3>
    <div class="card-tools">
      <button type="button" class="btn btn-tool" data-card-widget="collapse">
        <i class="fas fa-minus"></i>
      </button>
    </div>
  </div>
  <div class="card-body">Card content</div>
</div>

Architecture

AdminLTE is built around several key architectural patterns:

  • Component-Based Design: Each UI feature is encapsulated in a JavaScript class with standardized interfaces
  • jQuery Plugin Pattern: All components are available as jQuery plugins with $.fn.ComponentName registration
  • Data Attribute API: Automatic initialization through HTML data attributes (e.g., data-widget="pushmenu")
  • Event-Driven Communication: Components communicate via standardized events with .lte.{component} namespace
  • SCSS Modular System: Styling is organized in modular SCSS files with extensive customization variables
  • Bootstrap Integration: Built on Bootstrap 4 framework with extensive customizations and extensions

Capabilities

Card Components

Interactive card widgets with collapse, expand, refresh, and removal functionality. Perfect for dashboard panels and content containers.

class CardWidget {
  constructor(element: HTMLElement, options?: CardWidgetOptions);
  collapse(): void;
  expand(): void;
  toggle(): void;
  remove(): void;
  maximize(): void;
  minimize(): void;
  toggleMaximize(): void;
}

class CardRefresh {
  constructor(element: HTMLElement, options?: CardRefreshOptions);
  load(): void;
}

Card Components

Layout & Navigation

Core layout management and navigation components including sidebar, navbar, and responsive layout controls.

class Layout {
  constructor(element: HTMLElement, options?: LayoutOptions);
  fixLayoutHeight(extra?: string): void;
  fixLoginRegisterHeight(): void;
}

class PushMenu {
  constructor(element: HTMLElement, options?: PushMenuOptions);
  expand(): void;
  collapse(): void;
  toggle(): void;
  autoCollapse(resize?: boolean): void;
}

Layout & Navigation

Search Components

Search functionality for navbar and sidebar navigation with keyboard navigation and result highlighting.

class NavbarSearch {
  constructor(element: HTMLElement, options?: NavbarSearchOptions);
  open(): void;
  close(): void;
  toggle(): void;
}

class SidebarSearch {
  constructor(element: HTMLElement, options?: SidebarSearchOptions);
  init(): void;
  search(): void;
  open(): void;
  close(): void;
}

Search Components

Interactive Widgets

Advanced UI widgets including treeview navigation, expandable tables, todo lists, and direct chat interfaces.

class Treeview {
  constructor(element: HTMLElement, options?: TreeviewOptions);
  init(): void;
  expand(treeviewMenu: HTMLElement, parentLi: HTMLElement): void;
  collapse(treeviewMenu: HTMLElement, parentLi: HTMLElement): void;
  toggle(event: Event): void;
}

class TodoList {
  constructor(element: HTMLElement, options?: TodoListOptions);
  toggle(item: HTMLElement): void;
  check(item: HTMLElement): void;
  unCheck(item: HTMLElement): void;
}

Interactive Widgets

Utility Components

Utility components for fullscreen mode, dropdown management, iframe handling, and toast notifications.

class Fullscreen {
  constructor(element: HTMLElement, options?: FullscreenOptions);
  toggle(): void;
  fullscreen(): void;
  windowed(): void;
}

class Toasts {
  constructor(element: HTMLElement, options?: ToastsOptions);
  create(): void;
}

Utility Components

SCSS Styling System

Comprehensive SCSS variable system and component styling for complete visual customization.

// Core color variables
$blue: #0073b7 !default;
$sidebar-width: 250px !default;
$main-bg: #f4f6f9 !default;

// Layout variables
$boxed-layout-max-width: 1250px !default;
$content-padding-y: 0 !default;
$main-header-height: calc(#{$main-header-height-inner} + #{$main-header-bottom-border-width}) !default;

SCSS Styling System

Plugin Ecosystem

AdminLTE integrates 60+ popular third-party libraries including DataTables, Chart.js, Select2, FullCalendar, and many more for enhanced functionality.

// Major integrated plugins
const plugins = {
  datatables: 'DataTables with Bootstrap 4 theme',
  chartjs: 'Chart.js for charts and graphs', 
  select2: 'Enhanced select boxes',
  fullcalendar: 'Event calendar functionality',
  summernote: 'WYSIWYG editor',
  daterangepicker: 'Date range selection',
  sweetalert2: 'Beautiful alert dialogs'
};

Plugin Ecosystem