Recommended Integrations

  1. Docs
  2. Recommended Integrations

AdminLTE deliberately ships a lean dependency tree. Rather than bundling every form widget or chart library, we recommend best-in-class third-party libraries you can drop in when you need them. Every library below is MIT-licensed, actively maintained, and jQuery-free.

Each section has a CDN-based “install” snippet and the minimum JavaScript needed to wire it up. You can swap CDN URLs for npm installs if you’re using a bundler.

About the version numbers below: every CDN URL pins a specific version (eg. @4.6.13) so the snippets stay reproducible. They were current as of the latest release, but third-party libraries publish new versions independently of AdminLTE. Before copying a snippet into production, check the library’s homepage (linked in each section) for the latest version — and consider hosting a copy yourself rather than relying on the CDN long-term.

Form widgets
Date / time picker — Flatpickr

Flatpickr is a lightweight, no-dependency date and time picker. 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/flatpickr.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<input type="text" class="form-control" id="datepicker" placeholder="Select a date" />

<script>
  flatpickr("#datepicker", {
    altInput: true,
    altFormat: "F j, Y",
    dateFormat: "Y-m-d"
  })
</script>

Supports date ranges, time-only mode, multiple dates, and i18n out of the box.

Multi-select / tag input — Tom Select

Tom Select is a vanilla-JS rewrite of Selectize. Great fit for searchable selects, tag inputs, and remote-data autocomplete. 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.bootstrap5.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/tom-select.complete.min.js"></script>

<select id="tags" class="form-control" multiple placeholder="Pick some tags">
  <option value="design">Design</option>
  <option value="dev">Development</option>
  <option value="qa">QA</option>
</select>

<script>
  new TomSelect("#tags", { plugins: ["remove_button"] })
</script>

Ships a tom-select.bootstrap5.min.css theme that matches Bootstrap form controls.

Range slider — noUiSlider

noUiSlider handles single, range, and multi-handle sliders with no dependencies. 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/nouislider.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/nouislider.min.js"></script>

<div id="slider"></div>

<script>
  noUiSlider.create(document.getElementById("slider"), {
    start: [20, 80],
    connect: true,
    range: { min: 0, max: 100 }
  })
</script>
Color picker — Pickr

Pickr is a flat, modern color picker with multiple themes. 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/[email protected]/dist/themes/classic.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@simonwep/[email protected]/dist/pickr.min.js"></script>

<div id="color-picker"></div>

<script>
  Pickr.create({
    el: "#color-picker",
    theme: "classic",
    default: "#0d6efd",
    components: { preview: true, opacity: true, hue: true, interaction: { input: true, save: true } }
  })
</script>
Input mask — IMask

IMask handles phone numbers, credit cards, dates, currency — anything with a fixed pattern. 

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/imask.min.js"></script>

<input class="form-control" id="phone" placeholder="(123) 456-7890" />

<script>
  IMask(document.getElementById("phone"), { mask: "(000) 000-0000" })
</script>
File handling
File uploader — Dropzone

Dropzone is the de-facto drag-and-drop uploader. The v6 rewrite is plain JavaScript (the older v5 had jQuery-coupled examples; v6+ does not). 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/dropzone.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dropzone-min.js"></script>

<form action="/upload" class="dropzone" id="uploader"></form>

<script>
  Dropzone.autoDiscover = false
  new Dropzone("#uploader", { paramName: "file", maxFilesize: 5 })
</script>
File uploader — FilePond

FilePond is a more modern alternative with a polished UX and a plugin system for image preview, validation, EXIF, etc. 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/filepond.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/filepond.min.js"></script>

<input type="file" class="filepond" />

<script>
  FilePond.create(document.querySelector(".filepond"), { allowMultiple: true })
</script>
Rich text & markdown editors
Rich text — Quill

Quill is the best-supported open-source WYSIWYG editor. Lightweight, modular, no dependencies. 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.js"></script>

<div id="editor" style="height: 12rem;"></div>

<script>
  new Quill("#editor", {
    theme: "snow",
    placeholder: "Write something fancy&hellip;"
  })
</script>
Markdown — EasyMDE

EasyMDE is the actively-maintained fork of SimpleMDE. Same look, same API, but still gets updates. 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/easymde.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/easymde.min.js"></script>

<textarea id="markdown"></textarea>

<script>
  new EasyMDE({ element: document.getElementById("markdown") })
</script>
WYSIWYG + Markdown — Toast UI Editor

Toast UI Editor supports both markdown and WYSIWYG modes side-by-side. Best when you want users to pick their preferred mode. 

<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>

<div id="md-editor"></div>

<script>
  new toastui.Editor({
    el: document.getElementById("md-editor"),
    height: "20rem",
    initialEditType: "markdown",
    previewStyle: "vertical"
  })
</script>
Charts
ApexCharts

ApexCharts is the chart library used in the AdminLTE dashboards. Modern look, animated, MIT. 

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/apexcharts.min.js"></script>

<div id="chart"></div>

<script>
  new ApexCharts(document.querySelector("#chart"), {
    chart: { type: "area", height: 300 },
    series: [{ name: "Visits", data: [30, 40, 35, 50, 49, 60, 70] }],
    xaxis: { categories: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] }
  }).render()
</script>
Chart.js

Chart.js is the most-asked-for traditional chart library. Canvas-based, very wide chart-type support. 

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<canvas id="bar-chart" height="120"></canvas>

<script>
  new Chart(document.getElementById("bar-chart"), {
    type: "bar",
    data: {
      labels: ["Q1", "Q2", "Q3", "Q4"],
      datasets: [{ label: "Revenue", data: [120, 190, 170, 230] }]
    }
  })
</script>
Data tables
Tabulator

Tabulator is the jQuery-free DataTables alternative used in tables/data.html. Sort, filter, paginate, edit, export — all built in. 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tabulator_bootstrap5.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/tabulator.min.js"></script>

<div id="table"></div>

<script>
  new Tabulator("#table", {
    data: [{ id: 1, name: "Alice", role: "Admin" }],
    layout: "fitColumns",
    pagination: true,
    paginationSize: 10,
    columns: [
      { title: "ID", field: "id", width: 60 },
      { title: "Name", field: "name", headerFilter: "input" },
      { title: "Role", field: "role" }
    ]
  })
</script>
Calendar
FullCalendar

FullCalendar is the calendar used in pages/calendar.html. Drag-and-drop scheduling, multiple views, recurrence, MIT. 

<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js"></script>

<div id="calendar"></div>

<script>
  new FullCalendar.Calendar(document.getElementById("calendar"), {
    initialView: "dayGridMonth",
    headerToolbar: { start: "prev,next today", center: "title", end: "dayGridMonth,timeGridWeek,listWeek" },
    events: [{ title: "Team standup", start: "2026-06-01" }]
  }).render()
</script>
Drag and drop
SortableJS

SortableJS powers the kanban board demo. Reorder lists, drag between lists, touch-friendly. 31k stars. 

<script src="https://cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js"></script>

<ul id="list" class="list-group">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ul>

<script>
  new Sortable(document.getElementById("list"), { animation: 150 })
</script>
Lightbox / image viewer
GLightbox

GLightbox is a vanilla-JS lightbox for images, videos, and inline content. 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/glightbox.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/glightbox.min.js"></script>

<a href="image-large.jpg" class="glightbox">
  <img src="image-thumb.jpg" alt="Click to enlarge" />
</a>

<script>
  GLightbox()
</script>
Icon libraries

AdminLTE ships Bootstrap Icons by default — they’re SVG-based, ~1,900 icons, and used throughout the demo. If you need more, these all work alongside AdminLTE:

Library Icons Notes
Bootstrap Icons 1,900+ Default, SVG, MIT
Lucide 1,500+ Modern, SVG, ISC, very consistent style
Tabler Icons 5,800+ MIT, broadest free set available
Material Symbols 3,500+ Google, Apache 2.0, variable font
FontAwesome Free 2,000+ free Most-recognized, font-based
Phosphor 6,000+ MIT, six weights

Mix and match — they all coexist.

A note on bundling

The examples above use jsDelivr CDNs for copy-paste convenience. For production use, prefer:

  1. npm install + bundler (Vite, Webpack, Rollup) — best for tree-shaking and version locking
  2. Self-host the minified bundles — avoids CDN downtime as a failure mode
  3. CDN with integrity hashes — fine for prototypes and demos

AdminLTE doesn’t ship any of these libraries — keeping the framework’s footprint small is intentional. Pick what you need, skip what you don’t.