Skip to content
Get packs

Guide · Open source

How to use Gentelella: clone, build and customize the admin template

Updated · written with AI from the project's own documentation and checked against our catalogue data

Gentelella is a free, MIT-licensed admin dashboard template built with plain HTML, JavaScript and SCSS, and built with the Vite build tool. It suits developers who want a starting layout for an internal admin panel, SaaS dashboard or CRM screen without adopting a frontend framework. After this guide you will know how to clone the project, build it, find its example pages and begin customizing it.

GentelellaColorlibHQ/gentelella · ★ 21.6k · MIT

Quick start

  1. 1Check Node.js. Install Node.js, which is the listed prerequisite for this template.
  2. 2Clone the repository. Run git clone https://github.com/ColorlibHQ/gentelella.git in your terminal.
  3. 3Enter the project folder. Change into the cloned gentelella directory.
  4. 4Build the project. Run npm run build to produce the production files.
  5. 5Open the example pages. Browse the built pages or the live demo to choose a layout to start from.
  6. 6Customize the theme. Use the theme generator to pick colors and copy the generated SCSS tokens.
  7. 7Copy pages into your project. Move the pages and components you need into your own codebase and connect them to your data.

What Gentelella is and who it fits

Gentelella is a starter layout for admin dashboards, the kind of screens used in SaaS products, CRMs and internal tools. The v4 README describes it as using vanilla JavaScript, SCSS and Vite 8, with no Bootstrap, no jQuery and no SPA framework.

It ships with many example pages, including dashboards, forms, tables, charts, an inbox and a kanban board. Because the pages are plain HTML, you can copy pages and components into your own project.

  • Good fit: developers building an internal admin panel without a framework
  • Good fit: teams that want to avoid Bootstrap and jQuery dependencies
  • Not a fit: no-code users, since it requires editing code and running a build
  • Not a fit: React, Vue or other SPA setups, since the README says it has no SPA framework

Install Gentelella: prerequisites and clone

The install method is clone-and-build, and the listed prerequisite is Node.js. Start by cloning the repository from GitHub.

Run the clone command from a terminal in the folder where you want the project to live.

  • Prerequisite: Node.js
  • Clone the repository from the ColorlibHQ GitHub account
git clone https://github.com/ColorlibHQ/gentelella.git

Build and preview the template

The README shows that the screenshot script runs after a build, using the command npm run build. Build the project first, then use the output to view the pages.

The README's live demo at preview.colorlib.com is useful for checking how pages should look before you change anything locally.

  • The README mentions npm run build as a build step
  • A live demo of the production pages is available on the Colorlib preview site
npm run build

Find and reuse the example pages and components

The template includes 58 HTML pages across dashboards, auth, forms, tables, charts, app pages, e-commerce, admin and marketing. Each page is a starting point you can copy into your own project.

The component playground shows every reusable component with its exact HTML and a Copy button. This is the quickest way to lift a widget without digging through the full page.

  • Dashboards: operations, analytics, sales and system health variants
  • Forms: general, advanced controls, 6-step wizard and validation
  • Tables: DataTables with sort, search, pagination, row selection and CSV export
  • Charts: 20 ECharts variants including line, bar, donut, heatmap and gantt
  • App pages: inbox, kanban, calendar, file manager and settings

Customize the theme with the theme generator

The built-in live theme generator lets you pick a primary color and see charts, buttons, badges and links update. It can copy or download the generated SCSS tokens, which you can then apply to your project.

Dark mode follows prefers-color-scheme by default, and a manual toggle saves the choice in localStorage. Settings are stored in localStorage as well.

  • Open theme.html in the live demo to try the generator
  • Copy or download the generated SCSS tokens
  • Light and dark modes are both included

Adapt Gentelella for your own admin panel

Once you have a page you like, move its markup into your project and connect it to your own data and routes. Because the layout uses plain HTML and JavaScript, there is no framework state to migrate.

Gentelella's README notes support for right-to-left layouts through the html dir attribute and an RTL guide in docs/rtl.md. Check that guide before building an RTL interface.

  • Keep the shell (sidebar, header, footer) and replace the page content
  • Use data-page attributes to highlight the correct nav item, as the template does
  • Read docs/rtl.md for right-to-left layouts
<html dir="rtl">

What people use it for

  • An internal admin panel for managing customers or orders
  • A SaaS analytics dashboard with charts and tables
  • A CRM or project management screen using the kanban and calendar pages
  • A booking or HR tool built from the form and table pages

Frequently asked questions

Is Gentelella free to use?

Yes. The README describes Gentelella as MIT-licensed, free for personal and commercial use. You can check the LICENSE.txt file in the repository for the full terms.

What do I need to install Gentelella?

The listed prerequisite is Node.js. You clone the repository with git and then run the build with npm, as shown in the install steps.

Does Gentelella use Bootstrap or jQuery?

No. The README states it has no Bootstrap and no jQuery, and it is built with vanilla JavaScript and SCSS.

Can I use Gentelella with React or Vue?

The README says the template has no SPA framework, so it is not designed as a React or Vue setup. The separate Laravel edition is a different package.

How does Gentelella compare to AdminLTE or Tabler?

AdminLTE, Tabler, SB Admin 2 and CoreUI are comparable admin templates. Gentelella's distinguishing points in its README are that it avoids Bootstrap and jQuery and includes a live theme generator and many example pages.

Why won't my build run?

Check that Node.js is installed and that you ran the commands from inside the cloned gentelella folder. The source does not list other troubleshooting steps, so consult the repository's docs for further help.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Gentelella suits developers who want a free, Bootstrap-free admin layout with many example pages and a theme generator, and who are comfortable running a build. Non-technical users, teams that want a React or Vue SPA, or anyone who depends on Bootstrap components should pick a different template, such as AdminLTE or Tabler.

Install options & downloads