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:

npm install adminator-admin-dashboard

The package exposes dist/ for direct use and src/ if you want to customize and rebuild.

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.