# Adminator — 2026 Admin Dashboard Template
[](https://www.npmjs.com/package/adminator-admin-dashboard)
[](https://www.npmjs.com/package/adminator-admin-dashboard)
[](https://www.jsdelivr.com/package/npm/adminator-admin-dashboard)
[](https://github.com/puikinsh/Adminator-admin-dashboard/stargazers)
[](LICENSE)
[](https://webpack.js.org/)
[](#tech-stack)
[](#theming)
**Adminator 4** is a vanilla-JS admin dashboard template with a token-driven CSS-variable design system, dark mode, and zero framework dependencies. **No jQuery. No Bootstrap.** Just clean HTML, modern CSS, and ~700 KB of production JS for the entire 18-page template.
> **Heads up — v4.0.0 is a ground-up rewrite.** New design system, new shell architecture, Bootstrap removed. If you prefer the previous design, the v3 codebase lives on the [`legacy-v3`](https://github.com/puikinsh/Adminator-admin-dashboard/tree/legacy-v3) branch and will continue to receive security updates.
**[adminator.colorlib.com →](https://adminator.colorlib.com/)** · **[Live Demo →](https://preview.colorlib.com/theme/adminator/index.html)** · **[Documentation →](https://adminator.colorlib.com/docs/)** · **[Looking for premium templates? Visit DashboardPack →](https://dashboardpack.com/)**
## Preview
### Light mode

### Dark mode

### A few of the 18 pages
 Email — 3-pane inbox |
 Calendar — full FullCalendar |
 Charts — themed Chart.js |
 Forms — inputs, switches |
 Data Table — sort, filter, paginate |
 Sign In — split-screen auth |
## Upgrade to a Premium Dashboard
Need advanced features, dedicated support, and production-ready code? Explore our handpicked collection of professional admin templates on [DashboardPack](https://dashboardpack.com/?utm_source=github&utm_medium=readme&utm_campaign=adminator).
TailPanel
React + TypeScript + Tailwind CSS + Vite. 9 dashboard designs, dark and light themes.
|
Admindek
Bootstrap 5 + vanilla JS. 100+ components, dark/light modes, RTL support, 10 color presets.
|
Adminty
Bootstrap 5. 160+ ready-made pages, full UI component library for rapid development.
|
ArchitectUI
Bootstrap 5. 250+ components, modular architecture, 9 unique dashboard layouts.
|
Kero
Bootstrap 5 + Webpack. Dual layout system (horizontal + sidebar), SASS theming.
|
Cryptocurrency Dashboard
Bootstrap. Built specifically for ICO platforms, Bitcoin tracking, and crypto portfolios.
|
View All Premium Templates
## Table of Contents
- [What's New in v4.0.0](#whats-new-in-v400)
- [Quick Start](#quick-start)
- [Pages Included](#pages-included)
- [Architecture](#architecture)
- [Theming](#theming)
- [Tech Stack](#tech-stack)
- [Migrating from v3](#migrating-from-v3)
- [Staying on v3](#staying-on-v3)
- [Browser Support](#browser-support)
- [Changelog](#changelog)
- [Authors](#authors)
- [License](#license)
## What's New in v4.0.0
A ground-up redesign and rewrite. The whole template is built around a single CSS-variable token system, with a JS shell that renders the sidebar, topbar, and footer once for all 18 pages. **Bootstrap is gone.** Production JS dropped from ~4.5 MB to ~700 KB — an **85% reduction**.
### Highlights
- **Token-driven design system.** All colors, typography, spacing, and shadows live in `_tokens.scss` as CSS variables with light + dark variants. Edit one variable, every component updates.
- **Real dark mode.** A single `data-theme` attribute on `` swaps the entire UI — including Chart.js, FullCalendar, and jsvectormap, which all re-render via a `MutationObserver` to read the new token values.
- **Zero framework CSS.** No Bootstrap. No utility-class soup. Every UI primitive (buttons, dropdowns, alerts, badges, modals, tabs, accordions, switches, progress bars) is custom-built and theme-aware.
- **Single JS shell.** Sidebar/topbar/footer render from a single `NAV` manifest in `Shell.js`. Pages declare `` and three placeholders. Add a nav item by editing one array.
- **Real, themed library integrations.** Chart.js (6 chart types), FullCalendar (all four views, 24 seed events), jsvectormap (world map with 10 markers). All read CSS variables and re-render on theme toggle.
- **All 18 pages redesigned**: Dashboard, Email, Calendar, Chat, Compose, Charts, Forms, UI Elements, Buttons, Basic Table, Data Table, Google Maps, Vector Maps, Blank, Sign In, Sign Up, 404, 500.
### Bundle size
Since v4.2.0 the three heavy libraries are lazy-loaded, so what a page costs depends on what it actually renders.
| Metric | v3.0.0 | v4.0.0 | v4.2.0 |
| ----------------------------------- | ------- | ------- | --------------------- |
| JS + CSS on **every** page | ~4.8 MB | 726 KB | **130 KB** (28 KB gz) |
| Chart.js, fetched by 2 of 18 pages | bundled | bundled | 200 KB (67 KB gz) |
| FullCalendar, fetched by 1 of 18 | bundled | bundled | 287 KB + 15 KB CSS (84 gz) |
| jsvectormap, fetched by 1 of 18 | bundled | bundled | 133 KB (49 KB gz) |
| Top-level npm dependencies | 16 | 8 | **3** |
See [CHANGELOG.md](CHANGELOG.md) for the full release notes, including the migration guide.
## Quick Start
### Prerequisites
- **Node.js** 22.22.2 or higher (24 LTS recommended — see `.nvmrc`)
- **npm** 10 or higher (ships with Node.js)
### Install and run
```bash
# Clone the repo
git clone https://github.com/puikinsh/Adminator-admin-dashboard.git adminator
cd adminator
# Install the locked dependencies (Node.js >= 22.22.2)
npm ci
# Start the dev server (http://localhost:4000)
npm start
```
### Build commands
```bash
# Development server with HMR
npm start
# Production build (extracted CSS, minified)
npm run release:minified
# Default build (extracted CSS, unminified — useful for debugging)
npm run build
# Lint everything (JS + SCSS) — must be 0/0 to ship
npm run lint
# Verify lint, unit tests, production assets, and bundle budgets
npm run check
# Serve the existing production build without recompiling (port 3001)
npm run preview
# Browser checks: all 18 pages in both themes at desktop/mobile widths
npx playwright install chromium
npm run test:browser
# Write dist/bundle-report.html without opening a browser
npm run build:analyze
# Wipe dist/
npm run clean
```
The development server binds to `127.0.0.1` by default. For deliberate LAN testing, run `npx cross-env HOST=0.0.0.0 npm start`. webpack caches compilations in `node_modules/.cache/webpack/`; minified, unminified, and development builds use separate caches.
PR checks test Node 22/24, enforce production bundle budgets, and exercise Chromium on Node 24. Routine PRs do not require a version bump. Bump `package.json` for a release; pushes to `master` validate every change and create archives only for an unreleased version. Dependabot checks npm and GitHub Actions weekly.
### Release and publication
The canonical release history is [CHANGELOG.md](CHANGELOG.md), also published at [adminator.colorlib.com/docs/changelog/](https://adminator.colorlib.com/docs/changelog/). The release workflow extracts the current version's notes with `node scripts/release-notes.mjs` and includes them in the GitHub release alongside both ZIP variants.
The product website and live documentation are maintained in the `ColorlibHQ/tailwind-templates` monorepo under `templates/adminator-landing/` and deployed to the existing `adminator-colorlib` Cloudflare Pages project. Demo files are served from the `colorlib-preview` R2 bucket at `theme/adminator/`; downloadable ZIPs live in `colorlib-downloads` at `theme/adminator.zip` and a versioned key.
For publication, verify the release, upload hashed demo assets before HTML, preserve older hashed assets for cached pages, update both download keys, deploy the website/docs, and verify the live routes and files. npm publication is a separate authenticated step; check its current registry version before announcing an npm release.
### Install via npm
The current v4 line is published as [`adminator-admin-dashboard`](https://www.npmjs.com/package/adminator-admin-dashboard) on npm:
```bash
npm install adminator-admin-dashboard
```
The package ships both `src/` and a pre-built `dist/`. Import the source stylesheet in a Sass-enabled bundler:
```js
// In a Sass-enabled bundler / app
import 'adminator-admin-dashboard/src/assets/styles/2026/index.scss';
// dist/index.html + 17 other prebuilt pages are also in node_modules
```
Or copy the prebuilt files out of `node_modules/adminator-admin-dashboard/dist/` and serve them statically. Built CSS/JS filenames contain content hashes; use the references in the generated HTML instead of assuming a fixed `dist/style.css` filename.
> **⚠️ Don't pin to `@^2` or `@^3`.** Older majors on npm (2.7.x – 2.9.0) point to legacy code from before the 2026 redesign — they predate the token-driven design system, dark mode, and the new shell architecture. The latest `4.x` is what corresponds to this repository.
### CDN (jsDelivr)
The npm package ships the pre-built `dist/`, so the full static template is reachable via [jsDelivr](https://www.jsdelivr.com/package/npm/adminator-admin-dashboard) without installing anything. Each demo HTML references its CSS/JS via relative paths, so every page renders complete with all assets straight from the CDN:
```text
https://cdn.jsdelivr.net/npm/adminator-admin-dashboard@4/dist/index.html
https://cdn.jsdelivr.net/npm/adminator-admin-dashboard@4/dist/email.html
https://cdn.jsdelivr.net/npm/adminator-admin-dashboard@4/dist/calendar.html
https://cdn.jsdelivr.net/npm/adminator-admin-dashboard@4/dist/charts.html
https://cdn.jsdelivr.net/npm/adminator-admin-dashboard@4/dist/datatable.html
```
Useful for design-system inspection, quick prototyping, or embedding a single page in a sandbox. Pin to `@4` for the latest 4.x, or to `@4.1.5` for an exact release.
**Heads-up on hashing.** Webpack emits content-hashed asset filenames (`style.ee7b6e3f.css`, `2026.f17e3cec.js`), so direct CDN URLs for those individual chunks change on every release. For a single-file `