Getting Started

Adminator is a free, MIT-licensed HTML admin dashboard template. Vanilla JavaScript, custom CSS, ~700 KB of production JS for all 18 pages. No jQuery, no Bootstrap, no framework.

This guide gets you from zero to a running dev server. Total time: under a minute on a modern machine.

Prerequisites

You’ll need:

• Node.js 18.12 or higher — download from nodejs.org or install via your preferred version manager
• npm 9+ — ships with Node.js, no separate install

Check your versions:

node --version   # v18.12.0 or higher
npm --version    # 9.0.0 or higher

That’s it. No global CLI to install, no build tools to set up, no Docker.

Install via git

The fastest way to get the source — clone the repo and install:

git clone https://github.com/puikinsh/Adminator-admin-dashboard.git adminator
cd adminator
npm install

The install pulls in Webpack 5, Chart.js, FullCalendar, jsvectormap, and the lint tooling (ESLint 9, Stylelint 17). On a fresh machine this takes ~30 seconds.

Install via npm

If you’d rather pull the published package — both source and pre-built dist/ ship in the npm tarball at adminator-admin-dashboard:

npm install adminator-admin-dashboard

The package exposes dist/ for direct use and src/ if you want to customize and rebuild. Typical integration in another project:

// In your app / framework bundle
import 'adminator-admin-dashboard/dist/style.css';

// dist/index.html and the other 17 prebuilt pages are also in node_modules,
// handy if your backend serves the Adminator pages as static assets.

⚠️ Don’t install older majors

Older npm versions on the same package name (2.7.0 – 2.9.0, published mid-2025 through Dec 2025) point to legacy Adminator code from before the 2026 redesign — no token-driven design system, no dark mode, no command palette, still has jQuery + Bootstrap. They were the latest tag for months and a lot of search results still link to them.

The published version history:

2.7.0  2.7.1  2.8.0  2.8.1  2.9.0   ←  legacy line, jQuery + Bootstrap
                              ↓
4.1.5                                ←  current latest — 2026 redesign

Note that v3 was never published to npm. The repo’s v3 line (pre-redesign) only lives on the legacy-v3 git branch.

To always land on the modern build, install without a version pin (or pin explicitly to @latest):

# ✓ Right — pulls current v4
npm install adminator-admin-dashboard
npm install adminator-admin-dashboard@latest

# ✗ Pins to the pre-2026 legacy code
npm install adminator-admin-dashboard@^2

# ✗ Errors out — v3 was never published to npm
npm install adminator-admin-dashboard@^3

Use via CDN (jsDelivr)

Since the npm package ships the pre-built dist/, the entire static template is reachable through jsDelivr without installing anything. Each demo HTML references its CSS/JS via relative paths, so every page renders complete with all assets straight from 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, sandbox embeds, or one-off prototypes where setting up a local install isn’t worth it. Pin to @4 for the latest 4.x, or to an exact version (e.g. @4.1.5) if you need it frozen.

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 an AdminLTE-style single-file <script src> 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.

Run the dev server

npm start

This boots Webpack Dev Server at http://localhost:4000 with hot module replacement. The dashboard page (index.html) loads with live reload on any change under src/ — including SCSS, JS, and HTML.

You can also use npm run dev if you prefer the webpack-dashboard TUI for a denser status view.

Production builds

Two flavors:

# Minified, production-ready — what you'd deploy
npm run release:minified

# Unminified — useful for inspecting compiled output
npm run release:unminified

Both write to dist/. The minified build outputs ~700 KB of JS total (split across runtime.js, 2026.js, and vendor chunks for Chart.js + FullCalendar).

Lint

Adminator ships with linting configured for both JavaScript and SCSS. The repo policy is 0 errors, 0 warnings before shipping:

npm run lint           # JS + SCSS
npm run lint:js        # JS only
npm run lint:scss      # SCSS only

ESLint 9 (flat config) covers src/, webpack/, and root JS files. Stylelint 17 covers everything in src/**/*.scss.

What you get out of the box

A working dev server reveals 18 pages, all sharing the same shell (sidebar, topbar, footer):

• Dashboard — KPIs, themed Chart.js monthly chart, regional stats, todo list, weather widget
• Email — 3-pane inbox: folders, message list, reader pane, attachments
• Calendar — Real FullCalendar with Day, Week, Month, and Agenda views (24 seed events)
• Chat — 2-pane conversation list and message thread with typing indicator
• Compose — Rich-text email composer with attachments and scheduling
• Charts — 6 themed Chart.js examples (line, bar, doughnut, radar, area, stacked bar)
• Forms — Inputs, selects, switches, checkboxes, validation states
• UI Elements — Alerts, badges, progress, spinners, tabs, accordion, modal, tooltips
• Buttons — Solid, soft, outline, ghost variants across sizes
• Basic Table + Data Table (sortable, paginated, filterable)
• Google Maps + Vector Maps (jsvectormap world map with city markers)
• Blank, Sign In, Sign Up, 404, 500

Toggle dark mode from the topbar icon — Chart.js, FullCalendar, and the vector map all re-render with the new tokens via a MutationObserver on the data-theme attribute.

Next steps

You have a working template. From here:

• Read Architecture — how the single JS shell renders all 18 pages from one NAV manifest, and how the token-driven CSS-variable system works
• Read Adding a page — three steps: drop the HTML, register the title, append to NAV
• Read Theming — every color, shadow, and radius lives in _tokens.scss; edit one variable, every component updates
• Read Charts and Calendar & maps — how the library integrations stay in sync with the design tokens
• Read Deployment — production builds, static hosts (Netlify, Vercel, Cloudflare Pages, S3), and CDN configuration
• Read Migrating from v3 — v4 is a ground-up rewrite, treat it as a fresh template rather than an upgrade

Get help

• GitHub Issues — bug reports and feature requests
• CHANGELOG — release notes for every version since v4.0.0
• Live preview — try every page in your browser before you clone

Need more than Adminator?

Adminator is free and MIT-licensed — perfect for prototypes, side projects, and learning. When the project grows past that, DashboardPack is the next stop. The collection includes:

• TailPanel — React + TypeScript + Tailwind, 9 dashboard variants
• Admindek — Bootstrap 5, 100+ components, RTL, 10 color presets
• Adminty — Bootstrap 5, 160+ ready-made pages
• ArchitectUI — Bootstrap 5, 250+ components, 9 layouts

Each one ships with dedicated support, RTL where relevant, more components than a free template can justify maintaining, and framework variants Adminator doesn’t try to cover (React/TS, multi-layout systems, ICO/crypto). Browse all premium options on the landing page’s premium section.