Kova Lite — Admin Dashboard Starter

Thank you for downloading Kova Lite. This guide covers everything you need to customise the dashboard. No build tools are required: open any HTML file, edit, refresh.

Introduction

Kova Lite is the starter edition of the Kova admin dashboard for online stores, built with Bootstrap 5.3.3 and vanilla JavaScript. It is a working starter: real data tables, charts, dark mode and a customizer, with no build step.

• 8 HTML pages: store overview, orders, order details, products, customers, settings, sign in and 404
• Data layer: orders, customers and products load from JSON or your own API
• Built-in SVG charts (area, line, bar, stacked, donut, radial, sparkline), no chart library
• Data tables with search, filters, sorting, pagination, bulk select and CSV export, enabled with one attribute
• Drag-and-drop dashboard widgets
• Light and dark mode, 6 accent colors, dark sidebar, compact sidebar and RTL, saved in the browser
• Command palette (⌘K / Ctrl+K or /) that searches every page
• No jQuery, no build step, no external JavaScript besides Bootstrap

The full Kova edition adds 27 more pages (analytics, marketing, insights, support inbox, chat, calendar, kanban, product editor, invoices, packing slips and labels, settings pages and a UI kit). It is a separate item on the same marketplace.

File structure

kova-lite/
├── template/                 The dashboard (this is what you deploy)
│   ├── index.html            Store overview dashboard
│   ├── orders.html           Orders table
│   ├── order-detail.html     Order details
│   ├── products.html         Products (table and grid)
│   ├── customers.html        Customers
│   ├── settings.html         Store settings
│   ├── login.html, 404.html
│   ├── docs/index.html       This guide
│   └── assets/
│       ├── css/style.css     All Kova styles (tokens at the top)
│       ├── js/app.js         Layout, preferences, tables, forms
│       ├── js/charts.js      Kova Charts
│       ├── js/data.js        Data layer, stats, row templates
│       ├── data/             orders, customers, products (.json + .js)
│       ├── img/              Logo, avatars, products (SVG)
│       └── vendor/           Bootstrap 5.3.3, Bootstrap Icons 1.11
└── source/                   Optional: page sources + build.py

Getting started

1. Unzip the package and open template/index.html in a browser.
2. Edit any page with a code editor and refresh. All pages are plain HTML.
3. To publish, upload the contents of template/ to any static host or plug the markup into your back end (Laravel, Django, Rails, Node, PHP).

Fonts load from Google Fonts (Geist and Geist Mono). For offline use, download them and replace the <link> in the page head.

Pages included

Sidebar, topbar & layout

Each dashboard page has the same structure:

<div class="app">
  <aside class="sidebar">…</aside>
  <div class="main">
    <header class="topbar">…</header>
    <main class="content"> your page </main>
    <footer class="footer">…</footer>
  </div>
</div>

The sidebar collapses to icons on desktop (button in the topbar) and becomes a slide-in drawer below 992px. Add class="side-link active" to highlight the current page. A collapsible group is a button.side-link with data-bs-toggle="collapse" plus a ul.side-sub.

Because the sidebar is repeated on every page, the easiest way to change it is the optional build script (see below): edit source/partials/sidebar.html once and rebuild.

Colors, dark mode & customizer

All colors are CSS variables at the top of assets/css/style.css. Change the brand color in one place:

:root, [data-bs-theme="light"] {
  --k-primary: #0d9488;
  --k-primary-rgb: 13, 148, 136;
}
[data-bs-theme="dark"] {
  --k-primary: #2dd4bf;
  --k-primary-rgb: 45, 212, 191;
}

Chart colors use --k-c1 … --k-c6. Dark mode uses Bootstrap's data-bs-theme attribute on <html>.

The customizer (sliders icon in the topbar) lets each user pick color mode, accent color, sidebar style and layout. Choices are saved in localStorage under kova-settings and applied before the page paints, so there is no flash. To set defaults for everyone, change the attributes on <html>:

<html lang="en" data-bs-theme="dark" data-sidebar="dark" data-layout="mini">

To remove the customizer, delete the #customizer offcanvas and its topbar button.

Data layer & API

Orders, customers and products are real data, not hard-coded rows. They live in assets/data/ twice: as .json (what an API would return) and as .js wrappers so the pages also work when opened straight from disk.

Tables are filled from templates in assets/js/data.js:

<tbody data-template="orderRow" data-limit="200"></tbody>

Available templates: orderRow, orderRecent, customerRow, productRow, productCard. Edit their markup in data.js or add your own.

Connect your back end

Define the API before the scripts load (for example in the page head). Kova then fetches GET {base}/orders, /customers and /products, shows a loading state and fills the tables when the data arrives:

<script>
window.KOVA_API = {
  base: 'https://api.yourstore.com/v1',
  headers: { Authorization: 'Bearer YOUR_TOKEN' },
  endpoints: { orders: '/orders?limit=500' }   // optional overrides
};
</script>

The JSON shape is documented by the sample files. An order looks like this:

{ "id": 10482, "c": 1, "d": "2026-10-28T09:13",
  "items": [[0, 2, "Sand", "M"]],   // [productIndex, qty, colour, size]
  "sub": 229, "disc": 22.9, "ship": 9, "tax": 16.49, "total": 231.59,
  "st": "processing", "pay": "Visa", "store": "Kova Store" }

Read data from your own scripts with KovaAPI.get('orders').then(…). Demo dates are shifted so the newest order is always today; this only applies to the bundled sample data.

Customizable dashboard

Add data-dashboard to a Bootstrap row and data-widget="id" data-title="Name" to each column. A button with data-dash-edit toggles edit mode: widgets can be dragged, resized (3 → 4 → 6 → 8 → 12 columns) and hidden. The layout is saved per page in localStorage; data-dash-reset restores the default.

RTL support

Switch direction in the customizer or set it by default:

<html lang="ar" dir="rtl">
<link href="assets/vendor/bootstrap/bootstrap.rtl.min.css" rel="stylesheet" id="bs-css">

Kova styles use logical CSS properties, so the sidebar, tables, chat bubbles and all spacing mirror automatically.

Charts

Kova Charts is a small built-in library (assets/js/charts.js). A chart is a single element with a JSON config:

<div class="chart" data-chart='{
  "type": "area",
  "height": 280,
  "format": { "prefix": "$" },
  "labels": ["Jan", "Feb", "Mar"],
  "series": [
    { "name": "2026", "data": [5200, 6100, 7400] },
    { "name": "2025", "data": [4100, 4800, 5600], "color": "c3" }
  ]
}'></div>

Switch datasets with buttons, no JavaScript needed:

<button data-range-for="#revenue" data-range="week">Week</button>
<button data-range-for="#revenue" data-range="month">Month</button>

Update a chart from your own code (for example after an API call):

KovaCharts.update(document.querySelector('#revenue'), {
  labels: ['Mon', 'Tue', 'Wed'],
  series: [{ name: 'Revenue', data: [1200, 1800, 1500] }]
});

Data tables

Add data-table to the card that wraps a table. Each feature is turned on by adding its control:

JavaScript helpers

Behaviour is attached with data attributes, so most changes need no JavaScript:

Everything works in the browser with demo data. Nothing is sent to any server.

Optional build script

The source/ folder contains each page split into shared partials (head, sidebar, topbar, footer) and a tiny Python 3 build script with no dependencies:

cd source
python3 build.py

It rebuilds every page into template/. {{> sidebar}} includes a partial; {{title}} prints a value from the page header. You never need it if you prefer editing HTML directly.

Credits & licenses

People, stores, emails, orders and figures in the demo are fictional.

Support

Questions or found a bug? Contact us through the marketplace item page. We usually reply within one business day. Support covers setup questions and bug fixes; custom development and back-end integration are not included.

Changelog

1.0.0 — Initial release of the starter edition.