Quick start

PrerequisitesCopy Anchor Link

AdminKit is built with Vite. You need Node.js 24 and npm. The version is in .nvmrc, so nvm use selects it.

InstallationCopy Anchor Link

Clone the free repository or unzip the AdminKit PRO download, then install the dependencies from the lockfile:

git clone https://github.com/adminkit/adminkit.git
cd adminkit
npm ci

UsageCopy Anchor Link

# dev server at http://localhost:8080, reloads when a page, partial, stylesheet or script changes
npm run dev

# the same, and open the browser
npm start

# build the production files into dist/
npm run build

# serve the dist/ build locally
npm run preview

# ESLint, Prettier and the icon check
npm run lint

npm run build writes the HTML pages, css/, js/ and img/ (and fonts/ in AdminKit PRO) into dist/. Deploy that folder, or copy the files you need into your own project. dist/ is not part of the repository.

How the pages are builtCopy Anchor Link

Each page is a Handlebars template in src/pages/ with YAML frontmatter. The frontmatter picks the layout from src/layouts/ and sets the page title, the active sidebar item and the meta description:

---
name: pages-blank
title: Blank Page
layout: default.hbs
active: { pages: true, blank: true }
meta_description: "Blank page demo for the free AdminKit Bootstrap 5 admin template."
---

<h1 class="h3 mb-3">Blank Page</h1>

Shared markup (sidebar, navbar, footer, meta tags) lives in src/partials/, with the chart and dashboard widgets in src/partials/charts/ and src/partials/dashboard/. A page or widget puts its inline script in {{#push "scripts"}}…{{/push}}, and the layout prints those scripts after js/app.js with {{stack "scripts"}} (see Page scripts). A new file in src/pages/ becomes a page of the build without further configuration. The full file layout is on the Contents page.

Starter templateCopy Anchor Link

A page that uses the compiled files of the free version. Replace PATH with the location of the dist/ folder, or use the CDN URLs from the Download page. The optional js/head.js in <head> applies the stored color mode before the page is painted.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AdminKit</title>

  <!-- Optional: the stored color mode (light, dark or auto) before the first paint -->
  <script src="PATH/js/head.js"></script>

  <!-- AdminKit CSS, with the Inter font -->
  <link href="PATH/css/app.css" rel="stylesheet">
</head>
<body>
  <h1>Hello, world!</h1>

  <!-- AdminKit JS -->
  <script src="PATH/js/app.js"></script>
</body>
</html>

js/app.js works with a plain <script src> or with type="module", in the free version and in AdminKit PRO. For the full sidebar and navbar layout, start from pages-blank.html in dist/ or follow the HTML guide.