Gentelella v4

Gentelella v4 is a free, MIT-licensed admin dashboard template built with vanilla JavaScript, SCSS, and Vite 8 — no Bootstrap, no jQuery, and no SPA framework — that ships 58 production-ready HTML pages for SaaS dashboards, CRMs, internal tools, and e-commerce backends.

What is Gentelella v4?

Gentelella v4 is a ground-up redesign by Colorlib of the original Gentelella Bootstrap admin template, first released in 2014. It takes static HTML, SCSS, and vanilla ES2022 JavaScript as inputs and produces a Vite 8 multi-page application with 58 auto-discovered entry points, content-hashed assets, and a static dist/ folder you can deploy to any static host. The template includes light/dark mode with prefers-color-scheme detection, a live theme generator, a ⌘K command palette, and PWA support.

Key Features

• Live theme generator — pick a primary color on theme.html and every chart, button, badge, and link restyles in real time; copy or download the generated SCSS tokens.
• Component playground — one page (playground.html) shows every reusable component side-by-side with its exact HTML and a Copy button.
• ⌘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, and search across the active folder.
• PWA support — installable on macOS, Windows, iOS, and Android with an offline shell and service worker.
• 20 ECharts chart variants — line, area, bar, donut, pie, radar, gauge, scatter, heatmap, funnel, candlestick, polar bar, treemap, sankey, calendar heatmap, gantt, and dashboard mini-line; Apache ECharts 6 is lazy-imported and modular.
• DataTables.net 3 integration — re-skinned tables with sort, search, pagination, row selection, and CSV export.
• Minimal dependencies — 3 production dependencies and 10 dev dependencies; node_modules is about 178 MB, down from roughly 600 MB in Gentelella v2.

Who is it for?

• SaaS founders and product teams — stand up an analytics dashboard with charts, tables, and a landing page without hiring a frontend designer.
• Internal tool builders — assemble admin panels for user management, settings, and file management using the pre-built pages and localStorage-persisted settings.
• Agency developers — customize the design tokens in src/scss/v4/_tokens.scss and scaffold new pages via npm run new -- <slug> for client projects.
• Developers migrating from old Gentelella — the migration-v2 doc covers what changed between the Bootstrap-era template and this vanilla JS rewrite.

What can you do with Gentelella v4?

• Build an e-commerce backend — use the storefront, product detail, order list, order detail, and pricing tier pages included in the template.
• Create a project management app — use the kanban board with drag-and-drop, calendar with full CRUD, and inbox client.
• Prototype a marketing site — the included landing page has hero, stats band, features, showcase, testimonials, and FAQ sections, plus per-page SEO meta tags injected at build time.
• Document your component library — the component playground and theme generator let you inspect exact HTML for every UI element and export SCSS tokens.

How does Gentelella v4 work?

Clone the repo, run npm install and npm run dev, then open http://localhost:9173/production/index.html; the Vite dev server hot-reloads SCSS, JS, and HTML. A production build outputs static HTML plus hashed JS/CSS to dist/, which you can deploy to Netlify, Vercel, Cloudflare Pages, S3, or GitHub Pages — optionally with BASE_PATH=/admin/ for subpath deployment. The template also ships as an npm package with subpath exports and as a jsDelivr CDN distribution for browsing the demo pages and importing individual ES-module helpers.

Pricing

Gentelella v4 is free. It is MIT-licensed, free for personal and commercial use, and there are no paid tiers for the template itself. The README links to premium templates on DashboardPack for those who want advanced features, dedicated support, and production-ready code.

Pros and cons

• Pros: Free and MIT-licensed; 58 pages; no Bootstrap/jQuery/SPA framework; PWA-ready; live theme generator; minimal dependencies (~178 MB node_modules vs ~600 MB in v2).
• Cons: No backend, auth, real-time data, or state management; forms don't persist; no formal accessibility audit (though skip-link, focus rings, and ARIA labels are wired).

Alternatives

• AdminLTE — a Bootstrap-based admin dashboard template with a similar multi-page layout and a large user base.

FAQ

Is Gentelella v4 free?

Yes, Gentelella v4 is MIT-licensed and free for personal and commercial use. You can clone it from GitHub, install dependencies with npm, and deploy the static output anywhere. No license key or payment is required.

Does Gentelella v4 use Bootstrap or jQuery?

No. Gentelella v4 is built with vanilla JavaScript, SCSS, and Vite 8. It explicitly has no Bootstrap, no jQuery, and no SPA framework. The original Gentelella was a Bootstrap template, but v4 is a ground-up rewrite.

How many pages does Gentelella v4 include?

Gentelella v4 includes 58 production-ready HTML pages covering dashboards, auth, forms, tables, charts, e-commerce, admin, and marketing surfaces. There are 4 dashboard variants, 20 ECharts chart types, and a component playground.

What are the limitations of Gentelella v4?

It has no backend, no auth, no real-time data, and no state management. Forms post to #, the login form is a redirect with no validation, and activity feeds are static. These are intentionally excluded so you wire up your own API.