AdminKit is a free & open-source HTML dashboard & admin template based on Bootstrap 5.
AdminKit is an admin and dashboard template built on Bootstrap 5, released under the MIT license. It needs no jQuery, and neither do the plugins it uses. It has light and dark mode and targets WCAG 2.2 AA in both. Open the demo.
AdminKit PRO is the commercial edition, with more pages, dashboards and plugins, a settings panel and an AI chat. The table is generated from src/data/stats.json and the PRO snapshot in src/data/editions/pro.json; the template's Upgrade to Pro page (upgrade-to-pro.html) shows the same comparison with screenshots of AdminKit PRO, and adminkit.io/pricing has the prices and licenses.
| AdminKit | AdminKit PRO | |
|---|---|---|
| Pages | 20 | 53 |
| Dashboards | 1 | 5 |
| Plugins | 4 | 11 |
| Icons | 1,908 | 4,071 |
| Sidebar color schemes | 1 | 3 |
| Dark mode | Yes | Yes |
| AI chat | No | Yes |
| Settings panel | No | Yes |
| Support | GitHub issues | |
| License | MIT | Commercial |
You need Node.js 24 (see .nvmrc). Clone the repository, install the dependencies and start the development server on http://localhost:8080:
git clone --depth 1 https://github.com/adminkit/adminkit.git my-admin && cd my-admin && npm ci && npm run devThe server reloads when you change a page, partial, stylesheet or script. Build the production files into dist/, the HTML pages, css/app.css, js/app.js, fonts/ and img/, ready to deploy or copy into your own project:
npm run buildnpm run preview serves that build. You can also download the repository as a zip or from the website.
The built CSS and JavaScript are published to npm as @adminkit/core:
npm install @adminkit/coreWith a bundler, import the stylesheet and the script once, in the entry module or root layout:
import "@adminkit/core/css";
import "@adminkit/core";@adminkit/core is dist/js/app.js and @adminkit/core/css is dist/css/app.css; @adminkit/core/head is dist/js/head.js, and every other file stays available under @adminkit/core/dist/. The package ships TypeScript declarations for the import and the globals it adds. Imported during server-side rendering, where there is no window, the script does nothing, so it can be imported at the top of a module that also runs on the server.
The same files are on the unpkg CDN. js/app.js is a plain script, so it needs no build step or type="module":
<script src="https://unpkg.com/@adminkit/core@latest/dist/js/head.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/@adminkit/core@latest/dist/css/app.css"
/>
<script src="https://unpkg.com/@adminkit/core@latest/dist/js/app.js"></script>Pin an exact version instead of @latest in production. The script adds window.bootstrap, window.adminkit, window.lucide, window.theme, window.Chart, window.jsVectorMap and window.VanillaCalendar.
AdminKit is plain HTML, CSS and JavaScript, so it works with any back end or front-end framework. js/app.js also sets up icons, the sidebar and the other markup it enhances when a framework renders them after the page has loaded. The documentation has a setup guide for each of these:
css/app.css holds a light and a dark color mode, built on Bootstrap's color modes. Set data-bs-theme="dark" on <html> for dark mode, or on any other element for that part of the page. The navbar toggle switches between light, dark and auto (the operating system setting) and stores the choice in localStorage (adminkit_config_colorMode). To apply the stored mode before the first paint, load js/head.js in <head>, before the stylesheet, as a plain blocking script (no defer or type="module"):
<script src="js/head.js"></script>
<link rel="stylesheet" href="css/app.css" />It is a few hundred bytes, needs no unsafe-inline in a Content Security Policy and also hides the cards that fade in until js/app.js runs. Without it js/app.js still sets the mode, after the first paint.
In your own styles, use the custom properties for colors that follow the mode: Bootstrap's --bs-*, the gray scale --bs-gray-100 to --bs-gray-900 (which turns around in dark mode) and --ak-surface-bg, the background of cards, dropdowns and inputs. The dark values live in src/scss/1-variables/_dark.scss.
window.theme holds the theme colors of the current mode for charts and maps; document fires adminkit:themechange with the new colors when the mode changes. Charts and maps created with adminkit.chartjs(element, theme => config) and adminkit.vectorMap(theme => options) recolor themselves.
The Google Maps page loads the Maps JavaScript API without an API key, so Google marks the maps "For development purposes only" and logs a NoApiKeys warning (and an ApiProjectMapError per map) in the console. For production, create a key in Google Cloud, restrict it by HTTP referrer and add key=YOUR_KEY to the script URL in src/pages/maps-google.html.
The package contains the following directories and files:
adminkit/
├── .nvmrc
├── README.md
├── package.json
├── postcss.config.mjs
├── vite.config.js
├── public/
│ └── img/
├── scripts/
├── src/
│ ├── data/
│ ├── helpers/
│ ├── js/
│ │ ├── modules/
│ │ └── app.js
│ ├── layouts/
│ ├── pages/
│ ├── partials/
│ │ ├── charts/
│ │ └── dashboard/
│ └── scss/
│ ├── 1-variables/
│ ├── 2-mixins/
│ ├── 3-components/
│ ├── 4-utilities/
│ ├── 5-vendor/
│ └── app.scss
├── vite/
└── dist/
├── *.html
├── css/
│ └── app.css
├── img/
└── js/
├── app.js
├── head.js
└── icons-all.js
src/pages holds one Handlebars template per page with YAML frontmatter; src/layouts and src/partials are the shared markup, with the chart and dashboard widgets in src/partials/charts and src/partials/dashboard; a page's inline script sits at the end of the page, a widget's script in the widget's partial. public/ is copied to dist/ as it is.
From Bootstrap's lg breakpoint (992px) up, the navbar toggle hides and shows the sidebar. On smaller screens the sidebar is a Bootstrap offcanvas (.offcanvas-lg on #sidebar): the toggle opens it as a sheet over the page, Escape, the backdrop or a link close it, and focus stays inside while it is open.
Cards fade up as they scroll into view (.ak-reveal-cards on <main>, .ak-reveal on anything else), stat numbers with data-count-up count up, charts animate in, and cards whose content JavaScript draws show a skeleton placeholder until it is ready. Durations and easings are the --ak-duration-fast|base|slow and --ak-ease-standard|emphasized custom properties ($ak-transition-* in Sass). With prefers-reduced-motion: reduce nothing moves: content only fades in, numbers and charts show their final state at once. The cards only fade in on pages that load js/head.js; without it the content shows at once.
The template targets WCAG 2.2 AA in both color modes: 4.5:1 contrast for text, 3:1 for large text, icons and other controls, named controls and a logical heading order. Every page is checked in light and dark mode with axe (@axe-core/playwright), including the sidebar and navbar. New colors must pass too: derive text colors with ak-readable($color, $background) from src/scss/1-variables/_functions.scss, which darkens (or, on dark backgrounds, lightens) a color just enough, and use $theme-text-colors / $theme-text-colors-dark for theme colors drawn as text.
AdminKit uses Lucide icons: <i data-lucide="house"></i> gets the icon as an inline SVG inside it, also when the markup is added after the page has loaded. js/app.js only bundles the icons the templates use, listed in src/js/modules/icons.js. To use another icon, import it there and add it to icons; npm run lint fails when a template uses an icon that is not bundled, or the list bundles one that no template uses.
The icons page loads js/icons-all.js, which holds every Lucide icon. Its icon list, src/data/icons-lucide.json, is generated from lucide-static; run npm run icons:list after upgrading lucide and lucide-static.
The build targets the browsers Vite calls "baseline widely available". The browserslist field in package.json lists the same set for Autoprefixer.
 Edge |
 Firefox |
 Chrome |
 Safari |
 iOS Safari |
|---|---|---|---|---|
| 111+ | 114+ | 111+ | 16.4+ | 16.4+ |
To report a bug or request a feature, open a new issue.