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 for the commands.
Free version
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.jsThe 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
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.jsWhat 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:
{{#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}}Last updated on