C CoolAdmin v3.3.0

Getting Started

Install CoolAdmin locally in under a minute. Clone the repo and open index.html — no build step required. Bootstrap 5, vanilla JavaScript, four dashboard variants, real interactive apps.

Last updated May 22, 2026

CoolAdmin is a free, MIT-licensed Bootstrap 5 admin dashboard template. No jQuery. No SPA framework. Vanilla JavaScript on Bootstrap 5.3.8.

The repo always ships built HTML and CSS at the project root, so you can clone and open index.html directly. The Pug + SCSS source pipeline is opt-in for contributors who want to edit templates.

Two ways to use it

1. End-user mode — no Node required

The fastest path. Clone the repo, open the HTML in a browser:

git clone https://github.com/puikinsh/CoolAdmin.git
cd CoolAdmin

# Option A: open directly
open index.html

# Option B: serve over HTTP (recommended — some browsers block features on file://)
python3 -m http.server 8000     # or: npx serve .

Then visit http://localhost:8000.

The 35 HTML files at the repo root are real, committed artifacts — not build outputs. Bootstrap 5, Chart.js, FullCalendar, and Font Awesome are vendored in vendor/ (versioned files like vendor/chartjs/chart.umd.js-4.5.1.min.js), so a clean clone runs immediately with no install. The only CDN load is Leaflet on map.html (loaded from unpkg.com with SRI) and the Poppins / Inter fonts from Google Fonts.

2. Contributor mode — with the build pipeline

If you’re editing source — adding pages, renaming nav items, tweaking SCSS partials — you’ll want the Pug + SCSS pipeline.

Prerequisites:

  • Node.js 20 or higher
  • npm 10+
git clone https://github.com/puikinsh/CoolAdmin.git
cd CoolAdmin
npm install

# Concurrent watchers: Pug + Sass + Vite dev server with HMR
npm run dev

npm run dev boots three watchers in parallel:

  • pug — recompiles root *.html when anything in src/pug/ changes
  • sass — recompiles css/theme.css and css/app.css from src/scss/
  • vite — dev server with HMR at http://localhost:3000

Vite opens index.html automatically. Edit a SCSS variable or a Pug partial — browser reloads in milliseconds.

Production build

npm run build                # pug + sass build, no watchers
npm run build:pug            # HTML only
npm run build:sass           # CSS only

Output goes to the same place as source — root *.html files and css/theme.css + css/app.css. The repo’s “build” step is in-place; there is no dist/ directory.

What you get

35 pages organized into seven groups:

Four distinct dashboards

  • Operations (index.html) — KPIs, sparklines, revenue line chart, activity feed
  • Sales pipeline (index2.html) — deal stages, conversion funnel, leaderboard
  • Marketing analytics (index3.html) — channel breakdown, campaign performance, traffic sources
  • Projects (index4.html) — active projects, progress bars, team avatars, deadlines

Each has its own KPIs, primary chart, and supporting widgets. Click the dashboard tabs in the sidebar to switch.

Real interactive apps

  • Inbox (inbox.html) — 12-message split-pane reader with star, archive, reply, delete, mark-unread
  • Kanban (kanban.html) — HTML5 drag-and-drop board with To Do / In Progress / Review / Done
  • Calendar (calendar.html) — FullCalendar with self-updating demo events (no stale dates)
  • Data Table (data-table.html) — sortable, filterable, paginated table
  • Invoice (invoice.html) — print-ready invoice layout
  • Profile (profile.html) — user profile with edit form

Components & UI elements

Eight component pages with interactive demos: alert, badge, button (async loading), card, chart, form, modal (6 variants), progress bar (SVG circular rings). Plus pricing tables, notifications page, wizard.

Auth + error pages

login.html, register.html, forget-pass.html, 404.html, 500.html, maintenance.html. All flagged noindex in their <meta> tags.

The modern overlay — body.app

By default, CoolAdmin uses its legacy stylesheet (css/theme.css). The 2026 redesign added a second stylesheet (css/app.css) that activates by adding class="app" to <body>:

<body class="app">
  <!-- modern overlay active: new typography, brand-blue palette, modern cards -->
</body>

Every demo page in the repo opts in by default. To use the legacy design, remove the app class — the old styles still ship and still work.

This split lets you migrate at your pace and means an existing CoolAdmin v2 / pre-2026 user can pull in updates without losing their design.

Theme switcher

A floating palette icon in the bottom-right corner opens a panel with six color presets:

  • Blue (#4272d7) — default
  • Purple (#7c3aed)
  • Teal (#0d9488)
  • Rose (#e11d48)
  • Amber (#d97706)
  • Graphite (#334155)

Click a swatch to apply. Preference persists in localStorage under cooladmin.theme and survives across pages. The switcher only mounts on pages with body.app (where the overlay stylesheet is active) — auth and error pages skip it to avoid crowding the layout.

Command palette

Press ⌘K (macOS) or Ctrl+K (Windows/Linux) to open a fuzzy-search palette with 31+ commands. Navigate the dashboard, run quick actions (new task, new contact, send invoice…), toggle the theme.

Next steps

You have a working template. From here:

Core concepts

  • Architecture — the two-stylesheet system, script load order, body.app overlay
  • Pug + SCSS pipeline — how npm run dev boots Pug + Sass + Vite together, and how the single _nav-data.pug file drives the whole sidebar
  • Theming — --ca-* (legacy) and --m-* (modern overlay) token systems

Features

Components

  • Charts — Chart.js factory pattern via withCanvas()
  • Calendar — FullCalendar 6.1.20 with self-updating events
  • Interactive components — inbox, kanban, data table (each is one file + one inline script)

Operations

  • Deployment — Netlify, Vercel, Cloudflare Pages, S3, GitHub Pages

Get help

Need more than CoolAdmin?

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

  • Apex — Next.js 16 + React 19 + shadcn/ui, 5 dashboards, 300+ color schemes
  • Zenith — Achromatic Django 6 with HTMX, multi-tenant, 2FA, realtime, PWA
  • Haze — Next.js 16 with shadcn/ui on Radix, 96 pages, 8 interactive apps
  • Admindek — Bootstrap 5 + Vite 8, 231 pages, RTL support, 10 color presets
  • SvelteForge — SvelteKit 2 SaaS with billing, CRM, helpdesk, AI chat
  • Apex Laravel — Laravel 13 + Inertia.js + React 19, full backend CRUD

Each ships with dedicated support, framework variants CoolAdmin doesn’t cover (React, Next.js, SvelteKit, Django, Laravel), and production features (real auth, multi-tenant, billing, CRUD) that a free template can’t justify maintaining. Browse all premium options on the landing page’s premium section.