Gentelella v4 — Free Admin Dashboard Template

English | 简体中文

Gentelella v4 is a free, open-source admin dashboard template built with vanilla JavaScript, SCSS, and Vite 8. No Bootstrap. No jQuery. No SPA framework. A modern alternative to Bootstrap admin templates for SaaS dashboards, CRM systems, internal tools, e-commerce backends, and project management apps.

58 production-ready HTML pages, 20 ECharts chart variants, fully interactive inbox / kanban / calendar / file manager / settings, a live theme generator, a component playground, a ⌘K command palette, dark mode, and PWA support. MIT-licensed. Free for personal and commercial use.

Built for 2026 by Colorlib. Live demo →

Also available for your stack

The same dashboard, in the framework you already use — you're looking at the HTML edition:

The Laravel edition is a Composer package: the same shell as Blade layouts, 25 components, a CRUD engine with server-side tables, auth screens, and all 58 pages as a bundled demo.

Inbox · Kanban · Theme generator

Generate your own screenshots — npm run build && npm run screenshots boots Playwright and captures 22 key pages × light + dark = 44 PNGs to docs/screenshots/, plus downscaled WebP hero shots for this README (needs cwebp — brew install webp).

---

Why Gentelella v4

The original Gentelella has been a free Bootstrap admin template since 2014 — 3M+ downloads, 21k+ GitHub stars. v4 is a ground-up redesign:

• No Bootstrap, no jQuery — vanilla JavaScript + SCSS. ~165 MB node_modules (down from ~600 MB on v2).
• Vite 8 build system — instant HMR, multi-page app with auto-discovered entry points, hashed assets.
• Light + dark mode with prefers-color-scheme detection and pre-paint script (no flash of incorrect theme).
• PWA-ready — installable on desktop and mobile, offline shell, service worker.
• AI-assisted development — ships with helper files for Claude Code, Cursor, GitHub Copilot, and any agents.md-compatible tool.

Perfect for: SaaS dashboards, CRM, ERP, internal admin panels, project management tools, e-commerce backends, analytics dashboards, HR/payroll, booking systems, content management.

Features

• 🎨 Live theme generator — pick a primary color, watch every chart, button, badge, and link restyle in real time. Copy or download the generated SCSS tokens. Demo: theme.html
• 🧪 Component playground — every reusable component on one page, side-by-side with its exact HTML and a Copy button. Demo: playground.html
• ⌘K command palette — fuzzy search across all 58 pages and inline actions
• 📬 Real inbox client — folders, reader pane, compose modal, reply/forward, J/K/R/S/# keyboard shortcuts, search across the active folder
• 📱 PWA — installable on macOS / Windows / iOS / Android, offline shell, service worker
• ↔️ Sidebar rail mode — desktop hamburger collapses sidebar to icon-only with hover tooltips and click-to-flyout submenus
• 🌗 Dark mode — prefers-color-scheme aware, pre-paint script prevents flash, manual toggle persists in localStorage
• ↔️ RTL support — Arabic / Hebrew / Persian layouts via <html dir="rtl">, built on CSS logical properties (no mirrored stylesheet to maintain). See docs/rtl.md
• ♿ Accessibility — skip-link, keyboard focus rings, ARIA labels on interactive controls, semantic landmarks, screen-reader-friendly DataTables

What you get

Plus: 10 SCSS partials · build-time + runtime shell (no FOUC) · data-page attribute auto-highlights nav · mobile drawer + desktop rail mode · light/dark with prefers-color-scheme + pre-paint · cross-document view transitions · skip-to-content · keyboard focus-visible · accordion sidebar with sessionStorage memory · localStorage-persisted settings · per-page <meta description>, Open Graph, and Twitter Card tags auto-injected at build time.

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 →

Tech stack

• Vite 8 with Rolldown — multi-page app, 58 auto-discovered entry points
• SCSS with @use modules — no Bootstrap, no framework
• Vanilla ES2022 — no jQuery, no SPA framework, no build-time JSX
• Apache ECharts 6 — lazy-imported, modular (only chart types actually used)
• DataTables.net 3 core — re-skinned from scratch to match the design system
• Leaflet 1.9 — lazy-imported on the map page only
• Inter font from Google Fonts
• Playwright (devDep) — for the screenshot pipeline and smoke tests

3 production deps, 10 dev deps, ~165 MB node_modules (was ~600 MB on the old Gentelella).

Documentation

Full docs live at https://gentelella.colorlib.com/docs/ — covering every part of v4:

Quick start

git clone https://github.com/ColorlibHQ/gentelella.git
cd gentelella
npm install
npm run dev

Open http://localhost:9173/production/index.html. The dev server hot-reloads SCSS, JS, and HTML. Override the port with PORT=4000 npm run dev.

Production build

npm run build

Outputs static HTML + hashed JS/CSS to dist/. Deploy the dist/ folder to any static host (Netlify, Vercel, Cloudflare Pages, S3, GitHub Pages).

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

BASE_PATH=/admin/ npm run build

npm package

The package is consumable as an npm dependency for granular imports:

npm install gentelella

import { mountShell, showModal, showToast } from 'gentelella';
import 'gentelella/scss/v4/main.scss';

Subpath exports: gentelella/v4/* (JS modules), gentelella/scss/* (styles), gentelella/types (TypeScript declarations).

CDN (jsDelivr)

The package ships the pre-built dist/ and the unbundled src/, so every file is reachable via jsDelivr without a bundler. Useful for prototyping, design-system inspection, or pulling individual ES modules:

<!-- Pull individual ES-module helpers — paths under src/v4/ are stable -->
<script type="module">
  import { showModal } from 'https://cdn.jsdelivr.net/npm/gentelella@4/src/v4/modal.js';
  import { showToast } from 'https://cdn.jsdelivr.net/npm/gentelella@4/src/v4/toast.js';
  showToast('Hello from CDN', { variant: 'success' });
</script>

Browse the 58 built demo pages straight from CDN — every reference page renders with all assets resolved:

https://cdn.jsdelivr.net/npm/gentelella@4/dist/production/index.html
https://cdn.jsdelivr.net/npm/gentelella@4/dist/production/inbox.html
https://cdn.jsdelivr.net/npm/gentelella@4/dist/production/kanban.html
…

Heads-up on hashing. Vite emits content-hashed asset filenames in dist/assets/ and dist/js/ (main-v4-DDS6x4g-.css etc.), so direct CDN URLs for those chunks change on every release. The main src/main-v4.js entry also imports SCSS source, so it isn't browser-loadable — use it through your bundler. For an AdminLTE-style single-file <script src> drop-in with a stable URL, use the npm package with your own bundler instead. Gentelella v4's CDN strength is browsing the demo HTML pages and importing individual src/v4/* ES-module helpers.

Scripts

npm run dev              Start Vite dev server (port 9173)
npm run build            Production build to dist/
npm run build:dev        Non-minified build (debugging)
npm run preview          Serve dist/ to preview the production build (port 9174)
npm run analyze          Build + open the bundle treemap
npm run new -- <slug>    Scaffold a new page (see `--help` for flags)
npm run screenshots      Boot Playwright + capture 44 PNGs to docs/screenshots/
npm run smoke            Boot dev server, hit every page, assert HTTP 200
npm run deploy:preview   Build + sync to R2 with per-file cache headers
npm run lint             ESLint across src/
npm run format           Prettier write across src/

AI-assisted development

Gentelella v4 ships with helper files for the major AI coding tools — drop the repo open in any of them and the assistant gets immediate, accurate context about the architecture, conventions, and recipes:

Each file documents the hard rules (vanilla DOM only, single entry point, shell opt-in via body attributes, NAV as one constant, overlay helpers, CSS custom properties for colors, subpath-safe URLs), anti-patterns to avoid, and copy-pasteable recipes for adding pages, charts, modals, and toasts.

Project layout

src/
├── main-v4.js                 Entry — mounts shell, initializes charts/tables
├── v4/
│   ├── shell.js               Runtime: mobile drawer, theme toggle, dropdowns
│   ├── shell-render.js        Pure: nav config + sidebar/topbar/footer HTML
│   ├── charts.js              ECharts factories (revenue, sales, donut, …)
│   ├── tables.js              DataTables init for [data-datatable]
│   ├── menus.js               Popover menus + side panels
│   ├── modal.js               Modal dialog system
│   ├── toast.js               Toast notifications
│   ├── command-palette.js     ⌘K fuzzy search
│   ├── calendar.js            Month-grid calendar
│   ├── inbox.js               Inbox folder + message list
│   ├── kanban.js              Drag-and-drop kanban board
│   ├── file-manager.js        Tree + grid file browser
│   ├── form-controls.js       Date range, multi-select, rich text
│   ├── settings.js            localStorage-backed settings page
│   ├── details.js             Project / order / contact detail panels
│   ├── markup.js              Pure string helpers for JS-rendered content
│   ├── data-adapter.js        Seed + HTTP adapters for backend hydration
│   ├── product-images.js      Product gallery zoom
│   └── product-mockups.js     SVG product mockups
└── scss/v4/
    ├── main.scss              @use aggregator
    ├── _tokens.scss           CSS custom properties (colors, sidebar, fonts, radii)
    ├── _layout.scss           Sidebar, topbar, main, grid, footer, responsive
    ├── _components.scss       Buttons, cards, tables, status, toggles, progress
    ├── _forms.scss            Inputs, selects, validation, input groups
    ├── _widgets.scss          Stat cards, activity, donuts, sparklines, todos
    ├── _pages.scss            Pagination, alerts, calendar, inbox, invoice, …
    ├── _datatable.scss        DataTables UI overrides
    ├── _auth.scss             Login + error layouts
    └── _apps.scss             Chat, kanban, file manager, settings

production/                    58 entry HTML pages — one per surface
public/                        Static assets copied as-is
dist/                          Build output (gitignored)
types/gentelella.d.ts          TypeScript declarations
vite.config.js                 Multi-page Vite config

Customization

Design tokens

Every color, radius, sidebar dimension, and font setting lives as a CSS custom property in src/scss/v4/_tokens.scss. Edit :root, save, the Vite dev server reloads.

Want a different brand color? Change --primary and --primary-dk. Every chart, every button, every active nav item updates — ECharts reads these variables at chart-init time.

Adding a page

The fast way:

npm run new -- reports --title "Reports" --pretitle "Admin" \
  --breadcrumb "Home > User management|user_management.html > Reports" \
  --nav-group "Admin" --icon "profile"

This creates production/reports.html with the standard skeleton and (with --nav-group) inserts a sidebar entry into the NAV array of src/v4/shell-render.js. Vite auto-discovers the new entry — no config change needed. Run npm run new -- --help for all options, or use --dry-run to preview without writing.

The manual way:

1. Copy any existing page in production/ (e.g. profile.html) as your starting point.
2. Update the <title>, data-page, and data-breadcrumb attributes. Breadcrumb segments become links automatically when their text matches a sidebar entry (Forms → form.html); point one anywhere else with a pipe, e.g. data-breadcrumb="Home > Projects|projects.html > Acme Redesign". The final segment is the current page and is never a link.
3. Replace the <main> content with your markup using the v4 components.
4. Optionally add a new sidebar item by editing the NAV array in src/v4/shell-render.js.

The shell auto-marks the matching nav item active based on data-page.

Adding a chart

Add a factory function to src/v4/charts.js following the revenueLine / salesBar pattern, register it in the charts map, then drop a <div data-chart="your-name" style="width:100%;height:300px"></div> into any page. Colors come from the design tokens automatically.

Adding a sortable table

Mark up a regular <table class="table" data-datatable> with <thead> and <tbody>. The init runs automatically. Use <th data-orderable="false"> to disable sorting on a column, and data-page-length="25" on the table to change the page size.

Sidebar navigation

The sidebar is rendered from a single source — the NAV array in src/v4/shell-render.js. Edit there, every page updates.

TypeScript / IntelliSense

Type declarations for the public JS surface ship in types/gentelella.d.ts and are wired up via the types field in package.json. VS Code resolves IntelliSense automatically — no tsconfig required, no rewrite. Covers mountShell, showModal, showToast, openMenu, seedAdapter/httpAdapter, chart/table init, and the NAV schema.

Markup helpers

For pages that build content from data (orders rows, inbox threads, kanban cards), src/v4/markup.js exposes pure string-returning helpers — statTile(), statusBadge(), customerCell(), activityItem(), visitorRow(), emptyState(), banner(), skeletonRows(), plus escapeHtml(). Live examples on the Playground. Static pages keep their hand-written HTML — these are for JS-driven content where the boilerplate adds up.

SEO and metadata

Every page is built with SEO in mind:

• Semantic HTML5 — <main>, <nav>, <aside>, <header>, semantic <h1> page titles
• Per-page <meta description> auto-derived from the breadcrumb
• Open Graph + Twitter Card tags injected at build time
• PWA manifest + theme-color (light + dark variants)
• sitemap.xml generated at build time from the discovered pages, excluding auth/error screens (opt in with SITE_URL=https://example.com/ npm run build)
• JSON-LD structured data on the landing page — SoftwareApplication plus a FAQPage parsed from the page's own FAQ at build time, so the markup can't drift from the visible answers
• Pre-paint theme script — eliminates flash of incorrect theme on load
• Skip-to-content link + ARIA landmarks for screen reader navigation
• Cache-Control-aware deploy (scripts/deploy-preview.sh) — long-cache for hashed assets, short-cache for HTML, no-cache for service worker

Deployment

Static template — deploy dist/ anywhere that serves files.

No backend. No environment variables required (other than BASE_PATH if you're deploying under a subpath).

What's intentionally NOT included

• No backend. Forms post to # and don't persist. The dashboard is a UI template — wire up your own API.
• No auth. The login form is a redirect; there's no session, no token, no validation.
• No real-time. No WebSockets, no SSE, no polling. Activity feeds and stats are static.
• No state management. Toggles and todo checkboxes flip via direct DOM mutation.
• No formal accessibility audit. Skip-link, focus rings, ARIA labels and landmarks are wired, but no systematic screen-reader testing has been done. PRs welcome.

Roadmap

Shipped in 4.0.0 — full list in changelog.md. Still planned:

• Image optimization — compress public/images/*.jpg and ship AVIF + JPG fallback
• Lighthouse audit + tuning to 95+ Performance / 100 A11y / 100 SEO / 100 PWA
• Per-page chart-type tree-shaking to slim the ECharts vendor chunk
• i18n extraction pattern

Want any of these prioritized? Open an issue.

License

MIT — free for personal and commercial use. See LICENSE.txt.

Credit

Gentelella has been a free Bootstrap admin template since 2014, originally by Aigars Silkalns at Colorlib. v4 is a ground-up redesign for 2026 — Bootstrap and jQuery are gone, replaced by a self-contained design system.

If Gentelella v4 saves you time, consider starring the repo on GitHub — it helps other developers find the project.