gentelella Documentation

File: README.md Copy Chapter

Gentelella v4 — Free Admin Dashboard Template

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 →

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 Copy Chapter

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

• No Bootstrap, no jQuery — vanilla JavaScript + SCSS. ~178 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 Copy Chapter

• 🎨 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
• ♿ Accessibility — skip-link, keyboard focus rings, ARIA labels on interactive controls, semantic landmarks, screen-reader-friendly DataTables

What you get Copy Chapter

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 Copy Chapter

Need advanced features, dedicated support, and production-ready code? Explore our handpicked collection of professional admin templates on DashboardPack.

| Apex Dashboard

Next.js 16 + React 19 + Tailwind CSS v4 + shadcn/ui. 5 dashboard variants, 20+ app pages, 125+ routes, full CRUD. | [**Zenith Dashboard**](https://dashboardpack.com/theme-details/zenith-shadcn/?utm_source=github&utm_medium=readme&utm_campaign=gentelella)
  
  Next.js 16 + React 19 + Tailwind CSS v4 + shadcn/ui. Achromatic design, 50+ pages, 6 dashboards, live theme customizer. |

| --- | --- |
| Haze

Nuxt 4 + Nuxt UI v4 + Tailwind CSS v4. 92+ pages, 7 layouts, 5 dashboards, RTL, i18n, mock API layer. | [**TailPanel**](https://dashboardpack.com/theme-details/tailpanel/?utm_source=github&utm_medium=readme&utm_campaign=gentelella)
  
  React + TypeScript + Tailwind CSS + Vite. 9 dashboard designs, dark and light themes. |

| Admindek

Bootstrap 5 + vanilla JS. 100+ components, dark/light modes, RTL support, 10 color presets. | [**SvelteForge Premium**](https://dashboardpack.com/theme-details/svelteforge-premium/?utm_source=github&utm_medium=readme&utm_campaign=gentelella)
  
  SvelteKit + Tailwind CSS v4. 30+ wired-up modules, multi-tenant from row zero, dark/light/system mode. |

Tech stack Copy Chapter

• 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, ~178 MB node_modules (was ~600 MB on the old Gentelella).

Documentation Copy Chapter

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

Quick start Copy Chapter

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 Copy Section

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 Copy Section

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) Copy Section

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:

<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 Copy Section

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 Copy Chapter

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 Copy Chapter

/* Detailed source-code truncated for AI context efficiency. */

Customization Copy Chapter

Design tokens Copy Section

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 Copy Section

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 Copy Section

Add a factory function to src/v4/charts.js following the revenueLine / salesBar pattern, register it in the charts map, then drop a `` into any page. Colors come from the design tokens automatically.

Adding a sortable table Copy Section

Mark up a regular with and . The init runs automatically. Use to disable sorting on a column, and data-page-length="25" on the table to change the page size.

Sidebar navigation Copy Section

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

TypeScript / IntelliSense Copy Section

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 Copy Section

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 Copy Chapter

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)
• 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 Copy Chapter

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 Copy Chapter

• 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 Copy Chapter

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
• JSON-LD structured data on landing + marketing pages
• sitemap.xml generator (auto-built from production/*.html)
• Per-page chart-type tree-shaking to slim the ECharts vendor chunk
• RTL support (logical-properties pass)
• i18n extraction pattern

Want any of these prioritized? Open an issue.

License Copy Chapter

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

Credit Copy Chapter

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.

File: docs/components.md Copy Chapter

Components

This page has moved to https://gentelella.colorlib.com/docs/playground/.

Gentelella v4 documentation is now maintained at https://gentelella.colorlib.com/docs/ as the single source of truth.