adminlte4

<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Recommended Integrations | AdminLTE 4</title>  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> <meta name="color-scheme" content="light dark" /> <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" /> <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />   <meta name="title" content="Recommended Integrations | AdminLTE 4" /> <meta name="author" content="ColorlibHQ" /> <meta name="description" content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS. Fully accessible with WCAG 2.1 AA compliance." /> <meta name="keywords" content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant" />    <meta name="supported-color-schemes" content="light dark" /> <link rel="preload" href="../css/adminlte.css" as="style" />   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css" integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q=" crossorigin="anonymous" media="print" onload="this.media = 'all'" />   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/styles/overlayscrollbars.min.css" crossorigin="anonymous" />   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css" crossorigin="anonymous" />   <link rel="stylesheet" href="../css/adminlte.css" />  </head> <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page"> <div class="app-wrapper">  <nav class="app-header navbar navbar-expand bg-body">  <div class="container-fluid">  <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button"> </a> </li> <li class="nav-item d-none d-md-block"> <a href="../docs/introduction.html" class="nav-link"> Documentation </a> </li> <li class="nav-item d-none d-md-block"> <a href="../index.html" class="nav-link"> Back to live preview </a> </li> </ul>   <ul class="navbar-nav ms-auto">  <li class="nav-item"> <a class="nav-link" data-widget="navbar-search" href="#" role="button"> </a> </li>   <li class="nav-item dropdown"> <a class="nav-link" data-bs-toggle="dropdown" href="#"> 3 </a> <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end"> <a href="#" class="dropdown-item">  <div class="d-flex"> <div class="flex-shrink-0"> <img src="../assets/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3" /> </div> <div class="flex-grow-1"> <h3 class="dropdown-item-title"> Brad Diesel </h3> Call me whenever you can... 4 Hours Ago </div> </div>  </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item">  <div class="d-flex"> <div class="flex-shrink-0"> <img src="../assets/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3" /> </div> <div class="flex-grow-1"> <h3 class="dropdown-item-title"> John Pierce </h3> I got your message bro 4 Hours Ago </div> </div>  </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item">  <div class="d-flex"> <div class="flex-shrink-0"> <img src="../assets/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3" /> </div> <div class="flex-grow-1"> <h3 class="dropdown-item-title"> Nora Silvester </h3> The subject goes here 4 Hours Ago </div> </div>  </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item dropdown-footer">See All Messages</a> </div> </li>   <li class="nav-item dropdown"> <a class="nav-link" data-bs-toggle="dropdown" href="#"> 15 </a> <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end"> 15 Notifications <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> 4 new messages 3 mins </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> 8 friend requests 12 hours </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> 3 new reports 2 days </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item dropdown-footer"> See All Notifications </a> </div> </li>   <li class="nav-item"> <a class="nav-link" href="#" data-lte-toggle="fullscreen"> </a> </li>   <li class="nav-item dropdown"> <a class="nav-link" href="#" id="bd-theme" aria-label="Toggle color scheme" data-bs-toggle="dropdown" aria-expanded="false" > </a> <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem" > <li> <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false" > Light </button> </li> <li> <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false" > Dark </button> </li> <li> <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true" > Auto </button> </li> </ul> </li>   <li class="nav-item dropdown user-menu"> <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"> <img src="../assets/img/user2-160x160.jpg" class="user-image rounded-circle shadow" alt="User Image" /> Alexander Pierce </a> <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">  <li class="user-header text-bg-primary"> <img src="../assets/img/user2-160x160.jpg" class="rounded-circle shadow" alt="User Image" /> Alexander Pierce - Web Developer Member since Nov. 2023 </li>   <li class="user-body">  <div class="row"> <div class="col-4 text-center"> <a href="#">Followers</a> </div> <div class="col-4 text-center"> <a href="#">Sales</a> </div> <div class="col-4 text-center"> <a href="#">Friends</a> </div> </div>  </li>   <li class="user-footer"> <a href="#" class="btn btn-outline-secondary">Profile</a> <a href="#" class="btn btn-outline-danger float-end">Sign out</a> </li>  </ul> </li>  </ul>  </div>  </nav>   <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">  <div class="sidebar-brand"> <a href="../docs/introduction.html" class="brand-link"> <img src="../assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-75 shadow" /> AdminLTE 4 · Docs </a> </div>   <div class="sidebar-wrapper"> <nav class="mt-2">  <div class="px-3 pb-2"> <a href="../index.html" class="btn btn-sm btn-outline-light w-100 d-flex align-items-center justify-content-center gap-2" > Back to live preview </a> </div>  <ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="navigation" aria-label="Documentation navigation" data-accordion="false" id="docs-navigation" > <li class="nav-header">START HERE</li> <li class="nav-item"> <a href="../docs/introduction.html" class="nav-link"> Installation </a> </li> <li class="nav-item"> <a href="../docs/getting-started.html" class="nav-link"> Getting Started </a> </li> <li class="nav-header">FOUNDATIONS</li> <li class="nav-item"> <a href="../docs/layout.html" class="nav-link"> Layout Classes </a> </li> <li class="nav-item"> <a href="../docs/layout-blueprint.html" class="nav-link"> Layout Blueprint </a> </li> <li class="nav-item"> <a href="../docs/customization.html" class="nav-link"> Customization </a> </li> <li class="nav-item"> <a href="../docs/color-mode.html" class="nav-link"> Color Mode </a> </li> <li class="nav-item"> <a href="../docs/rtl.html" class="nav-link"> RTL Support </a> </li> <li class="nav-header">BUILDING</li> <li class="nav-item"> <a href="../docs/recipes.html" class="nav-link"> Recipes </a> </li> <li class="nav-item"> <a href="#" class="nav-link"> Components </a> <ul class="nav nav-treeview"> <li class="nav-item"> <a href="../docs/components/main-header.html" class="nav-link"> Main Header </a> </li> <li class="nav-item"> <a href="../docs/components/main-sidebar.html" class="nav-link"> Main Sidebar </a> </li> </ul> </li> <li class="nav-item"> <a href="#" class="nav-link"> JavaScript Plugins </a> <ul class="nav nav-treeview"> <li class="nav-item"> <a href="../docs/javascript/plugins-overview.html" class="nav-link"> Overview </a> </li> <li class="nav-item"> <a href="../docs/javascript/layout.html" class="nav-link"> Layout </a> </li> <li class="nav-item"> <a href="../docs/javascript/pushmenu.html" class="nav-link"> PushMenu </a> </li> <li class="nav-item"> <a href="../docs/javascript/treeview.html" class="nav-link"> Treeview </a> </li> <li class="nav-item"> <a href="../docs/javascript/card-widget.html" class="nav-link"> Card Widget </a> </li> <li class="nav-item"> <a href="../docs/javascript/direct-chat.html" class="nav-link"> Direct Chat </a> </li> <li class="nav-item"> <a href="../docs/javascript/fullscreen.html" class="nav-link"> Fullscreen </a> </li> <li class="nav-item"> <a href="../docs/javascript/accessibility.html" class="nav-link"> Accessibility </a> </li> </ul> </li> <li class="nav-item"> <a href="../docs/integrations.html" class="nav-link active"> Integrations </a> </li> <li class="nav-header">SHIPPING</li> <li class="nav-item"> <a href="../docs/migration.html" class="nav-link"> Migration from v3 </a> </li> <li class="nav-item"> <a href="../docs/deployment.html" class="nav-link"> Deployment </a> </li> <li class="nav-item"> <a href="../docs/browser-support.html" class="nav-link"> Browser Support </a> </li> <li class="nav-header">RESOURCES</li> <li class="nav-item"> <a href="../docs/faq.html" class="nav-link"> FAQ </a> </li> <li class="nav-item"> <a href="../docs/how-to-contribute.html" class="nav-link"> Contributing </a> </li> <li class="nav-item"> <a href="../docs/license.html" class="nav-link"> License </a> </li> <li class="nav-item"> <a href="https://github.com/ColorlibHQ/AdminLTE" target="_blank" rel="noopener" class="nav-link" > GitHub </a> </li> </ul>  </nav> </div>  </aside>  <main class="app-main"> <div class="app-content-header"> <div class="container-fluid"> <div class="row"> <div class="col-sm-6"> <h3 class="mb-0">Recommended Integrations</h3> </div> <div class="col-sm-6"> <ol class="breadcrumb float-sm-end"> <li class="breadcrumb-item"><a href="#">Docs</a></li> <li class="breadcrumb-item active" aria-current="page"> Recommended Integrations </li> </ol> </div> </div> </div> </div> <div class="app-content"> <div class="container-fluid"> <div class="row"> <div class="col-12"> <div class="card"> <div class="card-body"> 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. <blockquote> About the version numbers below: every CDN URL pins a specific version (eg. <code>@4.6.13</code>) 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. </blockquote> <h5 id="form-widgets">Form widgets</h5> <h6 id="date--time-picker--flatpickr">Date / time picker — Flatpickr</h6> <a href="https://flatpickr.js.org/">Flatpickr</a> is a lightweight, no-dependency date and time picker. <pre class="astro-code dark-plus" style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto" tabindex="0" data-language="html" ><code><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></code></pre> Supports date ranges, time-only mode, multiple dates, and i18n out of the box. <h6 id="multi-select--tag-input--tom-select"> Multi-select / tag input — Tom Select </h6> <a href="https://tom-select.js.org/">Tom Select</a> is a vanilla-JS rewrite of Selectize. Great fit for searchable selects, tag inputs, and remote-data autocomplete. <pre class="astro-code dark-plus" style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto" tabindex="0" data-language="html" ><code><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></code></pre> Ships a <code>tom-select.bootstrap5.min.css</code> theme that matches Bootstrap form controls. <h6 id="range-slider--nouislider">Range slider — noUiSlider</h6> <a href="https://refreshless.com/nouislider/">noUiSlider</a> handles single, range, and multi-handle sliders with no dependencies. <pre class="astro-code dark-plus" style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto" tabindex="0" data-language="html" ><code><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></code></pre> <h6 id="color-picker--pickr">Color picker — Pickr</h6> <a href="https://github.com/Simonwep/pickr">Pickr</a> is a flat, modern color picker with multiple themes. <pre class="astro-code dark-plus" style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto" tabindex="0" data-language="html" ><code><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></code></pre> <h6 id="input-mask--imask">Input mask — IMask</h6> <a href="https://imask.js.org/">IMask</a> handles phone numbers, credit cards, dates, currency — anything with a fixed pattern. <pre class="astro-code dark-plus" style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto" tabindex="0" data-language="html" ><code><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></code></pre> <h5 id="file-handling">File handling</h5> <h6 id="file-uploader--dropzone">File uploader — Dropzone</h6> <a href="https://www.dropzone.dev/">Dropzone</a> is the de-facto drag-and-drop uploader. The v6 rewrite is plain JavaScript (the older v5 had jQuery-coupled examples; v6+ does not). <pre class="astro-code dark-plus" style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto" tabindex="0" data-language="html" ><code><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></code></pre> <h6 id="file-uploader--filepond">File uploader — FilePond</h6> <a href="https://pqina.nl/filepond/">FilePond</a> is a more modern alternative with a polished UX and a plugin system for image preview, validation, EXIF, etc. <pre class="astro-code dark-plus" style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto" tabindex="0" data-language="html" ><code><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 })</