gentelella

Gentelella v4 is a free, open-source admin dashboard template maintained by Colorlib. It is a ground-up rewrite of the long-running Gentelella project, replacing the older Bootstrap-and-jQuery stack with vanilla JavaScript, SCSS and the Vite 8 build system. The README positions it as an alternative for SaaS dashboards, CRM/ERP backends, internal admin panels, project-management tools, e-commerce backends, analytics dashboards and booking or content-management interfaces. The package ships 58 production-ready HTML pages, treated as a multi-page Vite app with auto-discovered entry points. Included surfaces cover four dashboard variants (operations, analytics, sales, system health), authentication screens (sign-in with Google/GitHub social options, register, forgot password, 2FA, lock screen, plus 403/404/500 error pages), forms (general, advanced controls, a six-step wizard, drag-and-drop upload, validation, date-range picker, multi-select, rich text editor), and DataTables pages with sorting, search, pagination, row selection and CSV export. Charts are handled by Apache ECharts 6, lazily imported and modular, with 20 documented variants such as line, area, stacked area, bar, horizontal bar, mixed bar/line, donut, pie, radar, gauge, scatter, heatmap, funnel, candlestick, polar bar, treemap, sankey, calendar heatmap and gantt. Application pages include a calendar with CRUD, an inbox client with folders, reader pane, compose modal, reply/forward and J/K/R/S/# keyboard shortcuts, a chat view, a drag-and-drop kanban board, a tree-plus-grid file manager, notifications, an invoice with editable line items, profile, settings persisted to localStorage and an FAQ page. E-commerce and admin pages round out the set. Notable built-in tooling includes a live theme generator that restyles charts, buttons, badges and links in real time and can export the resulting SCSS tokens, a component playground that pairs each reusable component with its exact HTML and a copy button, and a command palette for fuzzy search across all 58 pages. Theming supports light and dark mode with prefers-color-scheme detection and a pre-paint script to avoid a flash of incorrect theme, and manual toggles persist in localStorage. RTL layouts for Arabic, Hebrew and Persian are supported through the html dir attribute and CSS logical properties rather than a separate mirrored stylesheet. Accessibility touches include a skip-link, focus rings, ARIA labels on interactive controls, semantic landmarks and screen-reader-friendly tables. The template is also PWA-ready with a service worker, offline shell and an installable manifest. Navigation is driven from a single NAV array, the shell can be injected at build time and runtime without a flash of unstyled content, sidebar behaviour covers both a mobile drawer and a desktop icon-only rail with flyout submenus, and per-page meta description, Open Graph and Twitter Card tags are injected at build time. Design tokens live as CSS custom properties, so changing the primary colour propagates to charts and UI elements. The stack is deliberately small: three production dependencies and ten dev dependencies, with node_modules around 165 MB compared to roughly 600 MB on the earlier version. Besides ECharts, it uses DataTables.net 3 re-skinned to the design system and Leaflet 1.9 for a customer map loaded only on that page, plus the Inter font. Playwright is a dev dependency used for a screenshot pipeline and smoke tests that request every page and assert HTTP 200. Developers get a set of npm scripts for dev server, production and non-minified builds, preview, bundle analysis, page scaffolding via a generator that can insert sidebar entries, screenshot capture, deployment with per-file cache headers, linting and formatting. A BASE_PATH variable supports deploying under a subpath, and the build output is static HTML plus hashed assets suitable for any static host. The project is also published to npm for granular imports of shell, modal and toast helpers with subpath exports for modules, styles and TypeScript declarations, and the pre-built dist plus unbundled src are reachable through jsDelivr for prototyping or inspecting demo pages directly. Helper files are provided for Claude Code, Cursor, GitHub Copilot and agents.md-compatible assistants, documenting conventions and recipes. Full documentation is hosted separately, covering setup, structure, architecture, theming, tables, forms, overlays, PWA, deployment and migration. It is MIT-licensed and free for personal and commercial use.