` and paste the version's changelog lines as its notes.
+6. Publish to npm from the tagged commit: `npm publish` (`prepublishOnly` builds first).
+7. In the website repository, refresh the docs previews: `npm run preview:sync -- --free ../adminkit --pro ../adminkit-pro`.
diff --git a/README.md b/README.md
index b0aa3db..fb6e8b5 100644
--- a/README.md
+++ b/README.md
@@ -8,9 +8,15 @@
AdminKit is a free & open-source HTML dashboard & admin template based on Bootstrap 5.
+
+
+
-
+## Features
+
+- **Dark mode:** light, dark and auto, built on Bootstrap's color modes.
+- **No jQuery:** AdminKit and every plugin it uses run on plain JavaScript.
+- **Accessible:** targets WCAG 2.2 AA in light and dark mode.
+- **Fully responsive:** the sidebar turns into an off-canvas sheet on small screens.
+- **Any framework:** plain HTML, CSS and JavaScript, with setup guides for React, Vue, Angular, Laravel and more.
+- **npm and CDN:** `@adminkit/core` ships TypeScript declarations and is safe to import during server-side rendering.
+- **Modern tooling:** Vite, Handlebars pages and Sass.
+
## AdminKit and AdminKit PRO
-AdminKit PRO is the commercial edition, with more pages, dashboards and plugins, a settings panel and an AI chat. The table is generated from `src/data/stats.json` and the PRO snapshot in `src/data/editions/pro.json`; the template's Upgrade to Pro page (`upgrade-to-pro.html`) shows the same comparison with screenshots of AdminKit PRO, and [adminkit.io/pricing](https://adminkit.io/pricing/) has the prices and licenses.
+Need more? [AdminKit PRO](https://adminkit.io/pricing/) adds more pages, dashboards and plugins, AI features and a settings panel.
@@ -39,11 +55,11 @@ AdminKit PRO is the commercial edition, with more pages, dashboards and plugins,
| Pages | 20 | 53 |
| Dashboards | 1 | 5 |
| Plugins | 4 | 11 |
-| Icons | 1,908 | 4,071 |
+| Icons | 2,029 | 4,178 |
| Sidebar color schemes | 1 | 3 |
-| Dark mode | Yes | Yes |
-| AI chat | No | Yes |
-| Settings panel | No | Yes |
+| Dark mode | ✔ | ✔ |
+| AI features | | ✔ |
+| Settings panel | | ✔ |
| Support | GitHub issues | Email |
| License | MIT | Commercial |
@@ -51,154 +67,40 @@ AdminKit PRO is the commercial edition, with more pages, dashboards and plugins,
## Quick start
-You need Node.js 24 (see `.nvmrc`). Clone the repository, install the dependencies and start the development server on http://localhost:8080:
+Clone the repository and install the dependencies (Node.js 24):
```sh
-git clone --depth 1 https://github.com/adminkit/adminkit.git my-admin && cd my-admin && npm ci && npm run dev
+git clone https://github.com/adminkit/adminkit.git
+cd adminkit
+npm install
```
-The server reloads when you change a page, partial, stylesheet or script. Build the production files into `dist/`, the HTML pages, `css/app.css`, `js/app.js`, `fonts/` and `img/`, ready to deploy or copy into your own project:
+Start the development server on http://localhost:8080:
```sh
-npm run build
+npm start
```
-`npm run preview` serves that build. You can also [download the repository as a zip](https://github.com/adminkit/adminkit/archive/master.zip) or [from the website](https://adminkit.io/#download).
-
-## npm and CDN
-
-The built CSS and JavaScript are published to npm as [`@adminkit/core`](https://www.npmjs.com/package/@adminkit/core):
+Build the production files into `dist/`:
```sh
-npm install @adminkit/core
-```
-
-With a bundler, import the stylesheet and the script once, in the entry module or root layout:
-
-```js
-import "@adminkit/core/css";
-import "@adminkit/core";
-```
-
-`@adminkit/core` is `dist/js/app.js` and `@adminkit/core/css` is `dist/css/app.css`; `@adminkit/core/head` is `dist/js/head.js`, and every other file stays available under `@adminkit/core/dist/`. The package ships TypeScript declarations for the import and the globals it adds. Imported during server-side rendering, where there is no `window`, the script does nothing, so it can be imported at the top of a module that also runs on the server.
-
-The same files are on the unpkg CDN. `js/app.js` is a plain script, so it needs no build step or `type="module"`:
-
-```html
-
-
`, before the stylesheet, as a plain blocking script (no `defer` or `type="module"`):
-
-```html
-
-`, `.ak-reveal` on anything else), stat numbers with `data-count-up` count up, charts animate in, and cards whose content JavaScript draws show a skeleton placeholder until it is ready. Durations and easings are the `--ak-duration-fast|base|slow` and `--ak-ease-standard|emphasized` custom properties (`$ak-transition-*` in Sass). With `prefers-reduced-motion: reduce` nothing moves: content only fades in, numbers and charts show their final state at once. The cards only fade in on pages that load `js/head.js`; without it the content shows at once.
+Setup guides for [HTML](https://adminkit.io/bootstrap/docs/frameworks/html/), [Laravel](https://adminkit.io/bootstrap/docs/frameworks/laravel/), [Django](https://adminkit.io/bootstrap/docs/frameworks/django/), [Rails](https://adminkit.io/bootstrap/docs/frameworks/rails/), [Symfony](https://adminkit.io/bootstrap/docs/frameworks/symfony/), [React](https://adminkit.io/bootstrap/docs/frameworks/react/), [Next.js](https://adminkit.io/bootstrap/docs/frameworks/nextjs/), [Vue](https://adminkit.io/bootstrap/docs/frameworks/vue/), [Nuxt](https://adminkit.io/bootstrap/docs/frameworks/nuxt/), [Angular](https://adminkit.io/bootstrap/docs/frameworks/angular/), [SvelteKit](https://adminkit.io/bootstrap/docs/frameworks/sveltekit/) and [Astro](https://adminkit.io/bootstrap/docs/frameworks/astro/).
-## Accessibility
+## Documentation
-The template targets WCAG 2.2 AA in both color modes: 4.5:1 contrast for text, 3:1 for large text, icons and other controls, named controls and a logical heading order. Every page is checked in light and dark mode with axe (`@axe-core/playwright`), including the sidebar and navbar. New colors must pass too: derive text colors with `ak-readable($color, $background)` from `src/scss/1-variables/_functions.scss`, which darkens (or, on dark backgrounds, lightens) a color just enough, and use `$theme-text-colors` / `$theme-text-colors-dark` for theme colors drawn as text.
-
-## Icons
-
-AdminKit uses [Lucide](https://lucide.dev/icons/) icons: `, which itself fades in once the page scripts have run) and any
-// element with .ak-reveal. Elements that come into view together are staggered through
+// element with .reveal. Elements that come into view together are staggered through
// --ak-reveal-index, capped at maxStagger steps. The hidden state is CSS under
// html.js-reveal, which js/head.js sets; without JavaScript nothing is hidden. Styles:
-// scss/3-components/_reveal.scss.
+// scss/3-components/_reveal.scss. .ak-reveal and .ak-reveal-cards are v4 aliases, remove
+// them in v5.
import { mount } from "./mount";
-const selector = ".ak-reveal, .ak-reveal-cards .card:not(.card .card)";
+const cards = ".reveal-cards, .ak-reveal-cards";
+const selector = `.reveal, .ak-reveal, :is(${cards}) .card:not(.card .card)`;
const maxStagger = 8;
const reveal = (elements) => {
@@ -14,14 +16,14 @@ const reveal = (elements) => {
const onTransitionEnd = (event) => {
if (event.target === element && event.propertyName === "opacity") {
element.removeEventListener("transitionend", onTransitionEnd);
- element.classList.remove("ak-revealing");
+ element.classList.remove("revealing");
element.style.removeProperty("--ak-reveal-index");
}
};
element.addEventListener("transitionend", onTransitionEnd);
element.style.setProperty("--ak-reveal-index", Math.min(index, maxStagger));
- element.classList.add("ak-revealed", "ak-revealing");
+ element.classList.add("revealed", "revealing");
});
};
@@ -42,6 +44,6 @@ root.classList.add("js-reveal-ready");
// mount() starts after the page scripts that build charts and tables on DOMContentLoaded, so
// their layout is in place before the cards become visible
if (root.classList.contains("js-reveal")) {
- mount(".ak-reveal-cards", (element) => element.classList.add("ak-revealed"));
+ mount(cards, (element) => element.classList.add("revealed"));
mount(selector, (element) => observer.observe(element));
}
diff --git a/src/js/modules/skeleton.js b/src/js/modules/skeleton.js
index 5561941..a335c27 100644
--- a/src/js/modules/skeleton.js
+++ b/src/js/modules/skeleton.js
@@ -1,14 +1,14 @@
// Loading placeholders for content that JavaScript draws (charts, maps, tables). The markup
-// shows an .ak-skeleton inside an element marked aria-busy="true"; markReady(element)
+// shows a .skeleton inside an element marked aria-busy="true"; markReady(element)
// removes the placeholders around element, sets aria-busy="false" and fires
// adminkit:ready on element. The chart, map and table helpers call it when they have
// drawn; call adminkit.ready(element) for your own content. Styles:
-// scss/3-components/_skeleton.scss.
+// scss/3-components/_skeleton.scss. .ak-skeleton is a v4 alias, remove it in v5.
export const markReady = (element) => {
const busy = element.closest('[aria-busy="true"]');
if (busy) {
- busy.querySelectorAll(".ak-skeleton").forEach((skeleton) => {
+ busy.querySelectorAll(".skeleton, .ak-skeleton").forEach((skeleton) => {
skeleton.remove();
});
busy.setAttribute("aria-busy", "false");
diff --git a/src/layouts/auth.hbs b/src/layouts/auth.hbs
index 72c8d8d..79e3eda 100644
--- a/src/layouts/auth.hbs
+++ b/src/layouts/auth.hbs
@@ -4,7 +4,7 @@
{{> site-meta }}
-
+
diff --git a/src/layouts/default.hbs b/src/layouts/default.hbs
index 5184ebb..1218065 100644
--- a/src/layouts/default.hbs
+++ b/src/layouts/default.hbs
@@ -10,7 +10,7 @@
{{> site-navbar }}
-
+
{{> @partial-block }}
diff --git a/src/partials/site-footer.hbs b/src/partials/site-footer.hbs
index 85cdb2d..0fb766e 100644
--- a/src/partials/site-footer.hbs
+++ b/src/partials/site-footer.hbs
@@ -1,4 +1,4 @@
-