ColorlibHQ/AdminLTE 4：jQuery なしの Bootstrap 5.3 管理画面コア

AdminLTE 4 HTML コアは Bootstrap 5.3 と vanilla JS

ColorlibHQ/AdminLTE は README が AdminLTE 4 の HTML / Bootstrap コアだと位置づけている。説明は fully responsive、Bootstrap 5.3、vanilla JavaScript（no jQuery）、MIT-licensed である。ライブデモは https://adminlte.io/themes/v4/、導入ドキュメントは https://adminlte.io/themes/v4/docs/introduction.html。リポジトリ言語メタデータは Astro だが、利用者が触る Quick start は静的 CSS/JS と npm パッケージ admin-lte が中心だ。

「最も人気」という README の自己評価は採用根拠にしない。見るべきは、jQuery プラグイン前提の v3 資産をそのまま載せ替えられないことと、このリポジトリがフレームワーク版を同梱していないことである。homepage は https://adminlte.io。最近のタグは素材上 v4.9.1、v4.9.0、v4.8.5 で、いずれも 2026-08 に出ている。

画面幅はスマートフォンから大きなデスクトップまで、と README は書いている。カスタマイズしやすい、使いやすい、といった自己評価は検証対象にしない。見る実体はデモの HTML と dist の CSS/JS である。jQuery を捨てた結果、古い AdminLTE 3 用プラグインを script タグで足しても動かないことが多い。ライブデモと自前コピーが食い違うときは、ドキュメントの introduction より CHANGELOG の破壊的変更を先に当たる。タグ v4.9.1 は素材の最新リリースであり、README 本文の「4.3 で追加」と数字が違う。機能説明は 4.3 節、配布物の固定は Releases のタグ、と役割を分ける。

adminlte-react から Drupal まで別リポジトリの表

Framework editions 節は、同じ AdminLTE 4 デザインを公式に載せる別リポジトリを表で列挙する。HTML コアが本 repo。React & Next.js は ColorlibHQ/adminlte-react（README は 30+ typed components、RSC-ready、⌘K palette と書く）。Vue 3 & Nuxt は adminlte-vue。Laravel は composer require colorlibhq/adminlte-laravel。Django は pip install django-adminlte4。Symfony は composer require colorlibhq/adminlte-symfony。Angular は npm i @adminlte/angular。ASP.NET Core は dotnet add package ColorlibHQ.AdminLTE.AspNetCore。Drupal は adminlte-drupal。共通ドキュメントは docs.adminlte.io。

Every edition ships the full AdminLTE 4 design と README は書くが、インストールコマンドはエディションごとに違う。npm install admin-lte@4 だけでは React コンポーネントは入らない。HTML コアを選んだなら、この表の他行は参照先であり依存ではない。

表の Live demo 列は HTML コアが themes/v4、React が themes/next-react、Vue が themes/vue-nuxt、Laravel が laravel.adminlte.io、Django が django.adminlte.io と分かれている。見た目が似ていても、ルーティングと認証の載せ方は各スタックの流儀だと README は書く。ダークモードと RTL は全エディション共通のデザイン要件として挙げられている。HTML コアで RTL を試すなら 4.3 のドキュメント改修（Customization & Theming、RTL）をデモと突き合わせる。Angular 22 や .NET 10 といった数字は README 表の自己申告で、各別リポジトリの README が正本になる。

jsdelivr の admin-lte@4 と Composer 経路

Quick start の CDN 例はビルド不要で、https://cdn.jsdelivr.net/npm/admin-lte@4/dist/css/adminlte.min.css と同パスの dist/js/adminlte.min.js を載せる。npm は npm install admin-lte@4。PHP 向け Composer は composer require almasaeed2010/adminlte。次の一歩は Getting Started guide か、デモページのコピーだと README は書いている。

バージョンを @4 に固定している点が重要で、v3 系の admin-lte を入れると jQuery 前提の CSS クラスに戻る。CDN を使うなら Network で admin-lte@4 の 200 応答とファイルパス dist/css/adminlte.min.css を確認する。Composer 経路は Packagist の almasaeed2010/adminlte であり、Laravel 専用パッケージ colorlibhq/adminlte-laravel とは別物だ。

ビルドステップなし、という CDN 経路は、社内で npm を禁止している静的ホスティング向きである。一方で jsdelivr の可用性やピン留めは README が保証していない。npm で入れる場合も、パッケージ名は admin-lte、スコープ付きではない。Getting Started を読まずに空の HTML へ CSS だけ足すと、レイアウト用のラッパークラスが足りずサイドバーが崩れる。デモページをコピーしてから不要ブロックを削る、という README の案内の方が事故は少ない。

v4 の 18 デモと 4.3 の SidebarSearch

What's new in v4 は Bootstrap 5.3 への書き直し、jQuery 排除、18 の新デモページを挙げる。Apps は Calendar（FullCalendar）、Kanban（SortableJS）、Chat、File Manager、Projects、Mailbox（Inbox / Read / Compose）。Forms は 4 ステップ Wizard。Tables は Tabulator（jQuery-free）。Pages は Profile、Settings、Invoice、Pricing、FAQ。Errors は 404、500、Maintenance。詳細は CHANGELOG.md が正本だと README は誘導する。

New in 4.3 では SidebarSearch プラグインがメニューを入力でフィルタし、ヒットしたサブメニューを展開し、クリア時に元の展開状態へ戻す。ヘッダの navbar search と対になる。Ribbons は .ribbon-wrapper と .ribbon で三サイズ、RTL で自動ミラー。ウィジェットは .user-block、.post、.widget-user、.widget-user-2、.description-block。追加デモは Gallery、Search Results、Ribbons。v3 からのクラス名変更を README だけで追うのは不足で、CHANGELOG.md を読む必要がある。

Calendar が FullCalendar、Kanban が SortableJS、表が Tabulator、と依存ライブラリ名が README に出ている。これらは jQuery 版の古い DataTables 置き換えであり、既存の jQuery DataTables 初期化コードは使えない。Gallery は画像ライブラリ不要のフィルタ可能メディア、Search Results は絞り込みパネル付き、と 4.3 で足された。言語スイッチャーのレシピも 4.3 のドキュメント追加に含まれる。CSS を出すコンポーネントには参照ページがある、と README は書く。参照ページが無い部品を本番の独自クラスで上書きすると、次のマイナーで見た目が黙って変わる。

npm start で localhost:3000、production は lint 込み

Developing AdminLTE itself は、テンプレ本体を改変する人向けの手順である。npm install のあと npm start が開発サーバで、http://localhost:3000 を live reload 付きで開く。npm run build は開発用アセット。npm run production は lint、optimize、bundlewatch まで含む本番パイプライン。npm run lint は JS、CSS、docs、lockfile。npm run css と npm run js はそれぞれ単体ビルドだ。

利用者がデモ HTML をコピーして自サイトに載せるだけなら、この開発サーバは必須ではない。CDN か npm の dist で足りる。fork してテーマを恒常改変するなら npm start で SidebarSearch と Ribbon デモが壊れていないかを先に見る。npm run production が失敗した状態で dist を本番に出す手順は README に無い。

live reload はファイル監視付きの開発サーバであり、本番の静的ホスティング手順ではない。css だけ直したいときは npm run css、js だけなら npm run js と README は分けている。全部まとめて品質ゲートを通すのが npm run production で、lint と bundlewatch が落ちたまま dist を切る手順は書かれていない。lockfile の lint も含むため、依存を手で package.json だけ書き換えるとここで失敗する。テンプレをライブラリとして npm 経由で使うだけなら、このスクリプト群は触らなくてよい。

MIT と Premium Templates は別スコープ

README バッジは opensource.org の MIT を指し、本文も MIT-licensed と明言する。商用利用も MIT の条件（著作権表示とライセンス文の保持）の範囲で読む。有償の Premium Templates 節へのリンクは本 OSS リポジトリの範囲外である。フレームワーク版のライセンスは各 repo の LICENSE を個別に見る。

向くのは Bootstrap 5 の管理 UI を HTML で早く試したいチームである。向かないのは jQuery プラグイン資産をそのまま残したい画面と、React 版が欲しいのに HTML コアだけ clone したケースである。確認は npm install admin-lte@4 のあと Getting Started のレイアウトをコピーし、npm start で localhost:3000 を開いて SidebarSearch のフィルタを試す。CDN なら admin-lte@4 の CSS/JS URL が 4 系であることを Network で見る。v4.9.1 タグと dist の中身が一致するかは GitHub Releases で照合する。

有償テンプレのリンクを README が持つのは、OSS コアの機能不足を有償で埋める導線であって、MIT ファイルの条件が有償に変わる意味ではない。HTML コアを採用するなら、まず themes/v4 のデモで SidebarSearch を試し、必要ならフレームワーク版リポジトリへ移る。v4.9.1 の tarball と npm の admin-lte@4 が同じ dist かを、導入時にハッシュやファイル一覧で見る。ドキュメントの introduction と実際のクラス名が違うときは CHANGELOG.md を開く。

編集部の結論

管理画面の HTML プロトタイプを Bootstrap 5.3 で早く組みたいフロントエンド向けである。adminlte-react や adminlte-laravel を使う予定なら、この HTML リポジトリだけを clone してもコンポーネントは揃わない。先に npm install admin-lte@4、または jsdelivr の admin-lte@4/dist/css/adminlte.min.css と adminlte.min.js を HTML に載せ、npm start で localhost:3000 を開き SidebarSearch と 4.3 のデモページが動くことを確認してから本番テーマに組み込む。MIT 条件は LICENSE と著作権表示を残す範囲で読む。

公式情報源

1. Official documentation
2. Official README
3. Project repository
4. Release notes