# 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/flatpickr@4.6.13/dist/flatpickr.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13"></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/tom-select@2.6.1/dist/css/tom-select.bootstrap5.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/tom-select@2.6.1/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/nouislider@15.8.1/dist/nouislider.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/nouislider@15.8.1/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/pickr@1.9.1/dist/themes/classic.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr@1.9.1/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/imask@7.6.1/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/dropzone@6.0.0-beta.2/dist/dropzone.css" />
    <script src="https://cdn.jsdelivr.net/npm/dropzone@6.0.0-beta.2/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/filepond@4.32.12/dist/filepond.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/filepond@4.32.12/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/quill@2.0.3/dist/quill.snow.css" />
    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/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/easymde@2.21.0/dist/easymde.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/easymde@2.21.0/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/apexcharts@5.12.0/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/chart.js@4.5.1"></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/tabulator-tables@6.4.0/dist/css/tabulator_bootstrap5.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/tabulator-tables@6.4.0/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/fullcalendar@6.1.20/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/sortablejs@1.15.7/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/glightbox@3.3.1/dist/css/glightbox.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/glightbox@3.3.1/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.