Adminator — 2026 Admin Dashboard Template

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 branch and will continue to receive security updates.

adminator.colorlib.com → · Live Demo → · Documentation → · Looking for premium templates? Visit DashboardPack →

Preview

Light mode

Dark mode

A few of the 18 pages

Upgrade to a Premium Dashboard

Need advanced features, dedicated support, and production-ready code? Explore our handpicked collection of professional admin templates on DashboardPack.

View All Premium Templates

Table of Contents

• What's New in v4.0.0
• Quick Start
• Pages Included
• Architecture
• Theming
• Tech Stack
• Migrating from v3
• Staying on v3
• Browser Support
• Changelog
• Authors
• 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 <html> 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 <body data-active="..." data-crumbs="..."> 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.

See 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

# 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

# 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, also published at 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 on npm:

npm install adminator-admin-dashboard

The package ships both src/ and a pre-built dist/. Import the source stylesheet in a Sass-enabled bundler:

// 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 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:

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 <script src> drop-in with a stable URL, install via npm and bundle through your own setup. The CDN's strength here is the ready-to-use demo pages.

Pages Included

All 18 pages share the same shell (sidebar + topbar + footer) and theme system. Standalone pages (auth, errors) skip the shell.

Architecture

The full architecture is documented in CLAUDE.md. The short version:

src/
├── *.html                       # 18 pages, ~500 lines each
└── assets/
    ├── scripts/2026/            # The only JS — 6 modules
    │   ├── index.js             # entry: imports SCSS, mounts shell, runs init
    │   ├── Shell.js             # NAV manifest + sidebar/topbar/footer renderers
    │   ├── init.js              # theme toggle, dropdowns, accordions, tabs, etc.
    │   ├── charts.js            # Chart.js seeds, theme-aware
    │   ├── calendar.js          # FullCalendar 7, theme-aware
    │   └── maps.js              # jsvectormap, theme-aware
    └── styles/2026/             # The only SCSS — 18 partials
        ├── index.scss           # entry, @use's everything below
        ├── _tokens.scss         # CSS variables (light + dark)
        ├── _shell.scss          # sidebar, topbar, footer chrome
        ├── _components.scss     # buttons, cards, hero, table, tag
        ├── _ui.scss             # alerts, badges, progress, tabs, modal
        ├── _forms.scss          # inputs, select, switch, check, radio
        ├── _auth.scss / _error.scss / _chat.scss / _data.scss / _charts.scss
        ├── _dashboard.scss / _email.scss / _calendar.scss
        ├── _fullcalendar.scss   # FullCalendar 7 token bridge
        └── _responsive.scss     # all media queries in one place

Every shell page follows the same anatomy:

<body data-active="dashboard" data-crumbs="Workspace | Dashboard">
  <div class="shell">
    <div data-shell-sidebar></div>      <!-- rendered by Shell.js -->
    <div class="main">
      <div data-shell-topbar></div>     <!-- rendered by Shell.js -->
      <main class="content">
        <!-- page-specific content -->
      </main>
      <div data-shell-footer></div>     <!-- rendered by Shell.js -->
    </div>
  </div>
</body>

data-active matches a key in Shell.js's NAV manifest. data-crumbs is a |-separated breadcrumb (last segment is highlighted as the current page).

Adding a new page

1. Create src/foo.html with the body anatomy above.
2. Add 'foo': 'Adminator · Foo' to the titles map in webpack/plugins/htmlPlugin.js.
3. Add a sidebar entry to NAV in src/assets/scripts/2026/Shell.js.
4. Restart the dev server.

Theming

Every visual decision is a CSS variable in src/assets/styles/2026/_tokens.scss. Change one, the whole template updates.

:root[data-theme="light"] {
  --primary:       #2563EB;
  --primary-light: #3B82F6;
  --primary-dark:  #1D4ED8;
  --primary-soft:  #EFF6FF;

  --bg-body:    #F0F4F8;
  --bg-card:    #FFFFFF;
  --bg-hover:   #F8FAFC;

  --t-base:     #1E293B;   /* primary text */
  --t-muted:    #64748B;
  --t-light:    #94A3B8;

  /* ... plus success / warning / danger / info / purple / pink / teal / orange */
}

:root[data-theme="dark"] {
  /* dark variants of the same tokens */
}

Toggle theme programmatically:

// Set
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('dash26-theme', 'dark');

Charts/maps re-render automatically — they observe the data-theme attribute.

Tech Stack

Build & tooling

• Webpack 5 — bundler
• Sass (modern @use syntax) — preprocessor
• PostCSS — autoprefix + future-CSS
• ESLint 10 (flat config) + Stylelint 17 — linting
• Vitest 4 + jsdom — unit tests
• No transpiler. Webpack 5 parses ES modules natively and the browser targets (Chrome/Firefox 90+, Safari/iOS 15+) need no downlevelling, so Babel was removed in v4.2.0 after an A/B build proved it changed nothing.

Runtime libraries

• Chart.js 4.5 — line/bar/doughnut/radar/area/stacked charts
• FullCalendar 7 — Day/Week/Month/Agenda calendar views
• jsvectormap 1.7 — interactive world map

Fonts

• Inter — body text
• Inter Tight — display headings
• JetBrains Mono — numerics, code, eyebrows

All fonts loaded from Google Fonts via a single @import at the top of _base.scss.

Removed in v4.0

The following dependencies were dropped — none of them are used in the new design:

• bootstrap, @popperjs/core — replaced with custom UI primitives
• dayjs — replaced with native Intl.DateTimeFormat
• perfect-scrollbar — native scrollbars styled via CSS
• masonry-layout, load-google-maps-api, skycons, brand-colors — unused

Migrating from v3

v4 is a rewrite, not an upgrade. The class names, file paths, and JS APIs all changed. If you have a v3 project with custom work:

1. Treat v4 as a fresh template. Don't try to merge — copy your custom content into the new shell.
2. Move theme overrides from Bootstrap variables to _tokens.scss.
3. Adopt the page anatomy (data-active, data-crumbs, three placeholder divs).
4. Port custom JS from AdminatorApp / Sidebar / ChartComponent classes to the data-attribute pattern in init.js.

For a smoother path, stay on v3 — see below.

Staying on v3

If you've built on v3 and prefer the old design, the v3 codebase lives on the legacy-v3 branch and will continue to receive security updates for at least 12 months.

# Get v3 from the legacy-v3 git branch
git clone -b legacy-v3 https://github.com/puikinsh/Adminator-admin-dashboard.git adminator-v3

Note on npm and v3. v3 was never published to npm. The published versions are 2.7.x–2.9.0 (the older line) and 4.1.5+ (the 2026 redesign — current latest). If you specifically need v3, clone the branch above. If you need the older legacy code that predates v3 too, npm install adminator-admin-dashboard@^2 lands you on 2.9.0.

Browser Support

Modern evergreen browsers — Chrome, Firefox, Safari, Edge (last 2 versions). The template uses color-mix(), CSS custom properties, aspect-ratio, container queries are not yet used. IE11 is not supported.

Changelog

See CHANGELOG.md for the full version history.

Latest releases

• v4.4.0 (2026-10-13) — Dependency refresh, smaller production output, faster cached builds, theme-toggle fixes, and browser verification. See release notes.

• v4.0.0 (2026-04-27) — The 2026 redesign. New design system, Bootstrap dropped, ~85% bundle reduction. Details.

• v3.0.0 (2026-01-13) — Architecture release. New utility modules, Vitest, code splitting, bundle analyzer.

• v2.7.1 — Fully jQuery-free.

• v2.6.0 — Dark mode system.

Adminator for Other Platforms

• Adminator RTL — right-to-left languages (Arabic, Hebrew, Persian)

Authors

Colorlib

More Resources from Colorlib

• Free Bootstrap Admin Dashboards
• HTML5 & CSS3 Login Forms
• Bootstrap Registration Forms
• CSS Table Templates
• Bootstrap Sidebar Examples
• Bootstrap 5 Templates
• HTML Website Templates
• Free CSS Templates

License

Adminator is licensed under The MIT License. Use, copy, modify, merge, publish, distribute, sublicense, and sell copies — but always credit Colorlib as the original author.