# Contents

The source and build layout of AdminKit 4.0: Handlebars pages, layouts and partials, JavaScript and Sass sources, and the files Vite builds into dist/.

AdminKit's source is a Vite project. The HTML pages, the JavaScript and the Sass are built into `dist/` with `npm run build`; `dist/` is generated and not part of the source. See [Quick start](/bootstrap/docs/getting-started/quick-start/) for the commands.

## Free version

```text
adminkit/
├── .nvmrc
├── package.json
├── package-lock.json
├── postcss.config.mjs
├── vite.config.js
├── vercel.json
├── public/
│   └── img/
│       ├── avatars/
│       ├── icons/
│       └── photos/
├── scripts/
│   ├── check-icons.mjs
│   ├── generate-icon-list.mjs
│   ├── screenshots.mjs
│   └── stats.mjs
├── src/
│   ├── data/
│   ├── fonts/
│   ├── helpers/
│   │   ├── index.js
│   │   └── stack.js
│   ├── js/
│   │   ├── modules/
│   │   ├── app.js
│   │   └── icons-all.js
│   ├── layouts/
│   │   ├── auth.hbs
│   │   └── default.hbs
│   ├── pages/
│   ├── partials/
│   │   ├── charts/
│   │   └── dashboard/
│   └── scss/
│       ├── 1-variables/
│       ├── 2-mixins/
│       ├── 3-components/
│       ├── 4-utilities/
│       ├── 5-vendor/
│       └── app.scss
├── vite/
└── dist/
    ├── *.html
    ├── css/
    │   └── app.css
    ├── fonts/
    ├── img/
    └── js/
        ├── app.js
        └── icons-all.js
```

The free version has 20 pages: the analytics dashboard, profile, pricing, invoice, sign-in, sign-up, blank, 404 and 500 pages, the UI pages (alerts, buttons, cards, forms, modals, typography), tables, Chart.js, Google Maps, the Lucide icons and an Upgrade to Pro page. The pricing, invoice, 404 and 500 pages and the Alerts, Modals and Tables pages are new in 4.0.

## AdminKit PRO

```text
adminkit-pro/
├── .nvmrc
├── package.json
├── package-lock.json
├── postcss.config.mjs
├── vite.config.js
├── vercel.json
├── public/
│   ├── img/
│   │   ├── avatars/
│   │   ├── flags/
│   │   ├── icons/
│   │   └── photos/
│   └── tables-datatables-ajax.json
├── scripts/
│   ├── check-icons.mjs
│   ├── generate-icon-list.mjs
│   └── stats.mjs
├── src/
│   ├── data/
│   │   ├── dashboards.json
│   │   └── stats.json
│   ├── helpers/
│   │   ├── index.js
│   │   └── stack.js
│   ├── js/
│   │   ├── modules/
│   │   ├── app.js
│   │   ├── fullcalendar.js
│   │   ├── head.js
│   │   ├── icons-all.js
│   │   ├── prompts.js
│   │   └── settings.js
│   ├── layouts/
│   │   ├── auth.hbs
│   │   └── default.hbs
│   ├── pages/
│   ├── partials/
│   │   ├── charts/
│   │   └── dashboard/
│   └── scss/
│       ├── 1-variables/
│       ├── 2-mixins/
│       ├── 3-components/
│       ├── 4-utilities/
│       ├── 5-vendor/
│       └── app.scss
├── vite/
└── dist/
    ├── *.html
    ├── tables-datatables-ajax.json
    ├── css/
    │   └── app.css
    ├── fonts/
    ├── img/
    └── js/
        ├── app.js
        ├── fullcalendar.js
        ├── head.js
        ├── icons-all.js
        ├── prompts.js
        └── settings.js
```

## What each directory holds

| Path | Contents |
| --- | --- |
| `src/pages/` | One Handlebars template per page, with YAML frontmatter for the title, layout and active sidebar item. 20 pages in the free version, 53 in AdminKit PRO. Frontmatter `category: dashboard` or `category: ai` marks dashboards and AI pages. |
| `src/layouts/` | The page layouts: `default.hbs` (sidebar, navbar, footer) and `auth.hbs` (sign-in and sign-up pages). |
| `src/partials/` | Shared markup: sidebar, navbar, footer and meta tags. `charts/` and `dashboard/` hold the chart and dashboard widgets, each with the script that draws it. |
| `src/helpers/`, `src/data/` | Handlebars helpers, among them `stack.js` (see below), and the global template data, such as the theme colors, the icon lists of the icon pages and `stats.json`, the generated page, dashboard, plugin and icon counts (`npm run stats`). In AdminKit PRO, `dashboards.json` holds the sample chart data of the dashboards. |
| `src/js/` | The JavaScript entry points. `src/js/modules/` wraps each third-party plugin and exposes the globals the page scripts use (`Chart`, `bootstrap`, `lucide`, ...). |
| `src/scss/` | The Sass sources, in five numbered groups: variables (`1-variables/_app.scss` for the light values, `_dark.scss` for the dark color mode), mixins, components, utilities and vendor overrides. `app.scss` builds `css/app.css`, which holds both color modes. |
| `public/` | Files copied to `dist/` unchanged, such as `img/`. |
| `vite/`, `vite.config.js` | The build: Vite with two small plugins for the Handlebars pages and the HTML formatting. |
| `scripts/` | The icon and stats checks that `npm run lint` runs, the script that regenerates the Lucide icon list, `stats.mjs` (`npm run stats`) and, in the free version, `screenshots.mjs` for the upgrade page and README screenshots. |
| `dist/` | The build output: the HTML pages and the compiled CSS, JavaScript, images and Inter fonts. |

`js/icons-all.js` holds every Lucide icon and is only loaded by the icons page; `js/app.js` bundles the icons the templates use. `js/head.js` applies the stored color mode before the first paint. In AdminKit PRO, `js/app.js` also includes DataTables; `js/fullcalendar.js` and `js/prompts.js` are loaded only by the pages that need them, and `js/settings.js` and `js/settings-head.js` add the settings panel of the demo.

## Page scripts

A page or widget partial wraps its inline script in `{{#push "scripts"}}`, and the layout prints the pushed scripts in order, after `js/app.js`, with `{{stack "scripts"}}`. A widget brings its own script wherever it is included, so a page needs no separate script file:

```handlebars
{{#push "scripts"}}
<script>
  document.addEventListener("DOMContentLoaded", function() {
    adminkit.chartjs("#chartjs-dashboard-bar", function(theme) {
      return { type: "bar", data: { labels: ["Jan", "Feb"], datasets: [{ data: [54, 67] }] } };
    });
  });
</script>
{{/push}}
```

---

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

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