G Gentelella v4.0.0

Getting Started

Install Gentelella locally in under a minute. Clone the repo, install dependencies, run the dev server, and you have 58 working admin dashboard pages with dark mode, ECharts, a real inbox, and a kanban board.

Last updated May 22, 2026

Gentelella is a free, MIT-licensed HTML admin dashboard template. The original has been around since 2014 with 3M+ downloads. v4 is a ground-up rewrite — vanilla JavaScript, SCSS, and Vite 8. No Bootstrap. No jQuery. No SPA framework.

This guide gets you from zero to a running dev server. Under a minute on a modern machine.

Prerequisites

You’ll need:

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

Check your versions:

node --version   # v20.0.0 or higher
npm --version    # 10.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/ColorlibHQ/gentelella.git
cd gentelella
npm install

node_modules is about 160 MB — down from ~600 MB on the old Gentelella, because v4 dropped Bootstrap, jQuery, and a few dozen jQuery plugins.

Install via npm

If you want to embed Gentelella’s compiled assets inside another project — both source and pre-built dist/ ship in the npm tarball:

npm install gentelella

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

Run the dev server

npm run dev

This boots Vite 8 at http://localhost:9173/production/index.html with hot module replacement. The dashboard page loads with live reload on any change under src/ — SCSS, JS, and HTML.

Override the port with PORT=4000 npm run dev if 9173 is taken.

Production builds

# Production — minified, hashed assets, what you'd deploy
npm run build

# Non-minified build, useful for debugging
npm run build:dev

# Preview the production build locally (serves dist/ on port 9174)
npm run preview

Output goes to dist/. To deploy under a subpath (e.g. https://example.com/admin/):

BASE_PATH=/admin/ npm run build

Vite rewrites all asset URLs to the prefix so the build runs anywhere.

Other scripts

npm run analyze       Build + open the bundle treemap (rollup-plugin-visualizer)
npm run screenshots   Boot Playwright + capture 44 PNGs to docs/screenshots/
npm run lint          ESLint across src/
npm run format        Prettier write across src/

The screenshots script is how the README and docs preview images get generated — handy if you redesign a page and want to refresh the social-preview cards.

What you get out of the box

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

Dashboards

Four variants — operations (KPIs + revenue line), analytics (heatmap, funnel, cohort matrix), sales (gauge, radar, pipeline), and system health (resource bars, deployment list, error log).

The headline features

  • 🎨 Live theme generator — pick a primary color on the theme page, watch every chart, button, badge, and link restyle in real time. Copy or download the generated SCSS tokens.
  • 🧪 Component playground — every reusable component on one page, side-by-side with its exact HTML and a Copy button. Stop guessing the markup.
  • ⌘K command palette — fuzzy search across all 58 pages plus inline actions like theme toggle. Open with ⌘K, Ctrl+K, or / from anywhere.
  • 📬 Real inbox client — folders, reader pane, compose modal, reply/forward, J/K/R/S/# keyboard shortcuts, search across the active folder. Not screenshots — a working interactive client.
  • 📋 Drag-and-drop kanban — four columns (To do, In progress, Review, Done), labelled cards, assignees, due dates, card-detail modal.
  • 🗂️ File manager — tree + grid view, breadcrumbs, search, share/download actions.
  • 📅 Calendar — month grid with events, sidebar mini-calendar.

Everything else

Forms (general, advanced controls, 6-step wizard, drag-and-drop upload, validation), tables (basic + DataTables.net with sort/filter/row-actions), authentication (sign-in, register, social, 2FA, forgot password, lock screen, 403/404/500), e-commerce (products, cart, checkout, order detail), pricing tables, FAQ, profile, settings, billing, notifications, UI elements gallery, maps (Leaflet).

Dark mode

Toggle from the topbar moon icon — every ECharts instance, every DataTable, every component re-renders with dark tokens. The preference persists in localStorage and is honored on first visit via prefers-color-scheme. A pre-paint inline script in every page eliminates the flash of incorrect theme.

Next steps

You have a working template. From here:

Core concepts

  • Architecture — how the vanilla-JS multi-page Vite app fits together, the shell pattern, lazy-loading
  • Adding a page — two steps: drop the HTML, append to NAV
  • Theming — the _tokens.scss design system; every color, radius, and shadow is one variable away

Headline features

Interactive components

  • Inbox — folders, reader pane, compose, J/K/R/S/# shortcuts
  • Kanban — HTML5 drag-and-drop board, no library
  • ECharts — 20 chart factories, dynamic-imported, theme-aware

Operations

  • Vite build — auto-discovered entries, vendor chunking, shell-injection plugin
  • PWA setup — installable on every platform, service worker, manifest
  • Deployment — Cloudflare Pages, Netlify, Vercel, S3, subpath builds

Need more than Gentelella?

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

  • 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, 10 dashboards, RTL, 10 presets
  • SvelteForge — SvelteKit 2 SaaS dashboard with billing, CRM, helpdesk, AI chat
  • Apex Laravel — Laravel 13 + Inertia.js + React 19, full backend CRUD

Each ships with dedicated support, framework variants Gentelella 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.

Get help