Documentation

The template is plain HTML, CSS and JavaScript, with no framework. Open index.html in a browser to use it, or put the folder on any web server to publish it: every link is relative, so it works from any folder.

register.html, the counter, is written by hand; every other page is written by the generator in src/. Change a generated page through its builder, or edit its HTML directly if you will not run the generator again.

Pages

449

Groups in the menu

32

Modules you can turn off

16

Browsers

The current Chrome, Edge, Firefox and Safari: the CSS uses :has(), container queries, color-mix() and logical properties, which all four support

Measured in

Chrome, at 13 screen sizes from 320 to 1920 px wide, light and dark

It needs Node.js 22 or newer, the version it is built with, and nothing else: there are no packages to install.

node src/build.mjs
node src/build.mjs products-list sales

Each page is a function in a module of src/pages that returns the page’s body; kit.mjs puts it in the frame (the sidebar, the top bar, the footer) and loads what it needs: a page with a chart gets ApexCharts. data.mjs is the demo store, and every figure on every page is worked out from it, so totals always add up.

Add a page

1. Add it to src/nav.json, in its group: a title, a slug and the module it belongs to.
2. Export a builder for the slug from a module in src/pages.
3. Run the generator. It stops with a message if a page is missing from the menu, or uses an icon Tabler does not have.

// src/pages/my-pages.mjs
import * as K from '../kit.mjs';

export default {
  'stock-note': () => ({
    body: K.pageHead({ title: 'Stock note', sub: 'What this page is for' })
      + K.card({ title: 'Today', body: '<p>Anything the kit can build.</p>' }),
  }),
};

{
  "label": "Help",
  "icon": "help",
  "pages": [
    {
      "title": "Documentation",
      "slug": "documentation",
      "module": "core"
    },
    {
      "title": "Changelog",
      "slug": "changelog",
      "module": "core"
    }
  ]
}

Set a module to false and its pages, its menu groups and its widgets leave the menu and the screens; nothing else needs editing. A link elsewhere to one of its pages goes too, or keeps its words without the link, and a heading or a group it leaves empty goes with it. core is the product itself and is always on.

window.POS_CONFIG = {
  store: 'Corner Store',
  currency: 'USD',
  locale: 'en-US',
  today: '2026-10-04',
  modules: {
    core: true,
    restaurant: false,   // tables, kitchen display, bar tabs… leave the menu and every screen
    …
  }
};

today is the demo’s “today”: date filters count back from the day the figures were made. Remove it and they count from the real date.

One file holds the whole menu: 10 sections, 32 groups and 449 pages. The sidebar, the horizontal and two-column menus and the breadcrumbs are all built from it, and each page carries the module that owns it.

system/tokens.css holds the colour ramps and what each colour is for, in light and in dark (180 tokens); system/system.css holds the type, the spacing, the corners and the components, all drawn from tokens.

The accent is the blue ramp, --blue-50 to --blue-950, at the top of tokens.css: give it your brand’s ramp and the buttons, links, focus rings and selected states follow in both themes. Keep --accent-text at 4.5:1 or more against --bg-surface.

The theme button in the top bar sets Light, Dark or the device’s own setting, and the device remembers it (pos.theme in local storage). data-theme on <html> fixes one theme; data-theme-default="dark" opens a page dark, as the Dark layout does. Charts redraw in the new colours.

<html lang="en" data-theme="dark">

Set dir="rtl", with your language, on <html>. The layout mirrors: the sidebar moves to the right, arrows turn, and every margin and padding is logical, so it follows. Text takes its direction from its own words, so an English line keeps its full stop at its end and figures read left to right; code blocks stay left to right.

ApexCharts draws left to right in either direction (its canvas is fixed to it); Chart.js legends and tooltips read right to left.

<html lang="ar" dir="rtl">

See the right-to-left layout

system.js wires every behaviour by attribute: add the attribute and the behaviour comes with it, with its keyboard support. The UI kit pages show each one working, with its markup to copy.

A chart is described in JSON in data-chart and drawn by ApexCharts in the theme’s colours, so it follows a change of theme. In the generator, K.chart({ type, categories, series, money }) writes it, with the chart’s figures in a table for screen readers.

The Charts pages show 20 kinds on the store’s figures; the Chart libraries pages draw the same figures with 6 libraries, for a team that already uses one.

The template draws Tabler Icons as inline SVG: write <i class="ti ti-NAME"></i> and system/icons.js puts the icon in its place. icons.js holds only the icons the pages use, so after you use a new one, run the generator and it is added.

The Icons pages show 13 sets; each one loads from a CDN on its own page only.

• Text, controls and their edges meet the AA contrast ratios in both themes.
• Everything works from the keyboard: menus, dialogs, tabs and radio groups follow the WAI-ARIA patterns, and focus can always be seen.
• Targets are at least 24 px; at the counter they are larger, for a touchscreen.
• A page reflows to 320 px wide, and keeps working with text spacing increased (WCAG 1.4.10 and 1.4.12).
• Movement stops when the device asks for reduced motion.
• Every chart has its figures in a table for screen readers.

Product photos in the demo: 23 from Unsplash and 4 from Pexels, under the Unsplash and Pexels licences, which allow commercial use without credit. The download carries placeholders in their place.