# Quick start

Install AdminKit's dependencies, run the Vite dev server on localhost:8080, build the production files into dist/ and start a page from the compiled files.

> To use AdminKit without changing its source, skip the setup below and link the compiled files from the npm package, the CDN or the `dist/` folder of a release download. See [Download](/bootstrap/docs/getting-started/download/) and the [starter template](#starter-template).

## Prerequisites

AdminKit is built with [Vite](https://vite.dev/). You need [Node.js](https://nodejs.org/) 24 and npm. The version is in `.nvmrc`, so `nvm use` selects it.

## Installation

Clone the [free repository](https://github.com/adminkit/adminkit) or unzip the [AdminKit PRO](/pricing/) download, then install the dependencies from the lockfile:

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

## Usage

```bash
# 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 built

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:

```html title="src/pages/pages-blank.html"
---
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](/bootstrap/docs/getting-started/contents/#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](/bootstrap/docs/getting-started/contents/) page.

## Starter template

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](/bootstrap/docs/getting-started/download/) page. The optional `js/head.js` in `<head>` applies the stored [color mode](/bootstrap/docs/getting-started/dark-mode/) before the page is painted.

```html
<!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](/bootstrap/docs/frameworks/html/).

---

Canonical HTML page: https://adminkit.io/bootstrap/docs/getting-started/quick-start/

Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io