Documentation

1. Introduction

Khamba is a premium admin dashboard template for e-commerce stores. It is built with plain HTML5, CSS3 and vanilla JavaScript plus Bootstrap 5, jQuery, Chart.js and Lucide icons — no build step required. Open a file in the browser and it works.

Key features

• 33 HTML pages: a dashboard, login and register, and 28 application pages covering orders, products, customers, marketing, team management and account settings.
• Fixed, collapsible sidebar with 6 navigation groups and badges. It becomes an off-canvas drawer on tablet and mobile.
• Clean topbar with global search, store switcher, theme toggle, notifications and a working user menu (Profile, Account Settings, Billing, Logout).
• Light and dark mode, remembered between visits.
• Built-in live customizer for the sidebar colour and site-wide font family.
• Real Chart.js charts: revenue/orders trend, customer growth, sales-by-category donut.
• Working demos: order/product/customer detail drawers, bulk actions, CSV export, modal forms with validation, toast confirmations, an FAQ accordion.
• A small design system driven by CSS variables (colours, radius, shadow, sidebar width, font).
• Responsive layout with light/dark mode support throughout.

2. Getting started

2.1 What is included

2.2 Requirements

• Any modern browser: latest Chrome, Edge, Firefox or Safari.
• A code editor for customising, for example VS Code.
• An internet connection for Bootstrap, jQuery, Chart.js, Lucide icons and Google Fonts, which load from public CDNs (see Going offline to self-host them).
• Node.js, npm or a bundler are not required.

2.3 Quick start

1. Unzip the package.
2. Open index.html in your browser to see the Dashboard, or open login.html first to see the sign-in screen (demo login: admin / admin).
3. Optional: serve the folder with any static server for a closer-to-production experience, for example npx serve or python -m http.server inside the template folder.

2.4 File structure

khamba/
├── index.html                 Dashboard (home page)
├── login.html · register.html  Authentication pages (demo)
├── orders.html … terms.html    28 application pages (see section 3)
├── documentation/             This documentation
├── assets/
│   ├── css/style.css           Styles + design tokens for every page
│   └── js/app.js               All application logic, in page-guarded sections

3. All pages

The sidebar links to the pages below, grouped exactly as they appear in the navigation. Data on every page is realistic demo content that you replace with your own.

General

Operations

Marketing

Management

Account

User menu

Auth & legal

4. Screenshots

5. Login and Register

Files: login.html, register.html.

• The login form is validated in the browser. Submitting admin / admin redirects to index.html; anything else shows an inline error.
• register.html validates required fields and that the two passwords match, then redirects to login.html?registered=1, which shows a success message.
• The sidebar and user-menu Logout links open login.html.

6. Layout components

6.1 Sidebar

The sidebar is a fixed, scrollable column (264 px wide, 76 px collapsed). It contains the logo, six navigation groups, and a store card with Logout at the bottom.

Add a menu item

<a class="sb-link" href="my-page.html" title="My Page">
  <i data-lucide="star"></i>
  <span>My Page</span>
  <em class="sb-badge">NEW</em>   <!-- optional badge -->
</a>

Place it under a group label, or start a new group with:

<div class="sb-group">MY GROUP</div>

Icons come from Lucide. Use the icon name after data-lucide=. The title attribute shows as a tooltip when the sidebar is collapsed.

Active page

Add active to the sb-link of the current page:

<a class="sb-link active" href="orders.html" title="Orders">...</a>

Collapse and mobile

• The collapse button in the sidebar header (#sbToggle) shrinks the sidebar to icons only. The choice is saved to localStorage as khamba-collapsed.
• Below 992 px the sidebar becomes an off-canvas drawer opened by the hamburger button in the topbar (#mobileToggle) and closed by tapping the dark overlay (#backdrop).
• Change the widths with the CSS variables --sb-w and --sb-w-c (collapsed).

6.2 Topbar

6.3 Footer

The footer (<footer class="footer-x">) sits at the bottom of every page via a sticky-footer flex layout, so it stays at the bottom even when a page has little content. Edit the copyright text and the Privacy/Terms/Help links with Find and Replace in Files.

7. Branding and customization

7.1 Change the logo most asked

The logo appears in the sidebar header of every dashboard page, and again in the left panel of the login and register pages. It has two parts: an icon in a colour square, and the store name text next to it.

Step 1 — change the store name (text)

Find the word Khamba inside <span class="brand"> and replace it with your own store name.

Step 2 — replace the icon with your own logo image

Find

<span class="logo"><i data-lucide="shopping-bag"></i></span>

Replace with

<img src="your-logo.png" alt="Logo" style="width:32px;height:32px;border-radius:9px;object-fit:cover">

A square image around 64×64 px (PNG with a transparent background) gives the cleanest result. The sidebar has a dark background, so make sure your logo is visible on dark colours.

Favicon

The template does not set a favicon by default. Add one by placing this inside <head> on every page:

<link rel="icon" href="favicon.svg" type="image/svg+xml">

7.2 Colours (design tokens)

Almost all colours, radius and shadow values are CSS variables at the top of style.css. Change a value once and it updates the whole template.

:root{
  --font:'Plus Jakarta Sans',system-ui,sans-serif;
  --bg:#f6f7f9;    --card:#fff;      --border:#e8eaee;
  --text:#111827;  --muted:#6b7280;  --hover:#f3f4f6;
  --primary:#4f46e5;
  --sb:#0f1115;    --sb-w:264px;     --sb-w-c:76px;
  --r:14px;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.03);
}
[data-bs-theme=dark]{
  --bg:#0b0d11; --card:#14171d; --border:#242832;
  --text:#f3f4f6; --muted:#9aa1ae; --hover:#1c2028; --shadow:none
}

7.3 Fonts

Khamba ships with five Google Fonts already linked in every page's <head>: Plus Jakarta Sans (default), Inter, Poppins, DM Sans and Manrope. Switch between them live with the Customizer (see 7.4), or set one permanently by changing --font in style.css and removing the others from the Google Fonts <link> tag to save a request.

7.4 Live customizer

Click the palette icon fixed to the right edge of any dashboard page to try different looks instantly, with no code changes:

• Sidebar colour — 6 presets, or pick any custom colour.
• Font family — all 5 fonts above, applied across the whole dashboard including chart text.
• Choices are saved per-browser in localStorage (khamba-sb, khamba-font), so they persist on refresh. "Reset to default" clears them.

7.5 Dark mode

Toggle with the moon/sun icon in the topbar (#themeToggle). It flips the data-bs-theme attribute on <html> between light and dark, which switches every CSS variable in one go, redraws open charts with dark-mode-aware colours, and is saved to localStorage as khamba-theme.

8. Components and JavaScript

8.1 UI building blocks

Reusable classes you'll see throughout style.css: .card-x (panel), .kpi (metric card), .table-x (data table), .badge-x.s-* (status pill), .tabs (status filter tabs), .btn-dark-x / .btn-soft (buttons), .row-item (icon + label + value row), .bar (stock/usage progress bar).

8.2 Charts

All charts use Chart.js (loaded from a CDN). Chart data lives directly inside each page's guarded section of app.js — for example the Dashboard's revenue/orders chart and customer-growth sparkline are defined in section 2 of app.js, and Analytics' funnel/category-donut data is in section 5. Replace the arrays with your own numbers; the chart will redraw automatically, including on theme/font changes.

8.3 Modals, drawers and toasts

• Modals (e.g. "New order", "Add product") use plain Bootstrap 5 modals with HTML5 required validation; submitting shows a confirmation toast and resets the form.
• Detail drawers (order/product/customer/transaction detail) are plain Bootstrap 5 offcanvas panels, written directly in each page's HTML and opened with data-bs-toggle="offcanvas" — no JavaScript is needed to open them.
• Toasts are triggered from JavaScript with window.showToast('Your message'), defined once in app.js and shared by every page.

8.4 JavaScript reference

app.js is a single file for every page. It is organised into numbered, clearly commented sections; each section only runs when the element it needs is present on the current page (for example, the Orders section is guarded by if (document.getElementById('ordersTable'))), so loading the same file everywhere never causes errors.

9. Responsive behaviour

• Desktop (≥992 px): fixed sidebar, full topbar, multi-column KPI and chart grids.
• Tablet/mobile (<992 px): the sidebar becomes an off-canvas drawer; KPI cards drop to 2 columns; wide tables scroll horizontally inside their card.
• All interactive panels (modals, offcanvas drawers, dropdowns) are Bootstrap 5 components and are touch-friendly out of the box.

10. How to

10.1 Add a new page

1. Duplicate the page that is closest to what you need (for example, duplicate orders.html for another table-based page).
2. Change the <title>, the page <h1> and the subtitle.
3. Remove active from the old sidebar link and add it to the link for your new page (or add a brand-new <a class="sb-link">, see Sidebar).
4. Replace the content between <main class="content"> and </main>. Keep the sidebar, topbar, footer and the <script src="app.js"> tag.
5. Give your page's unique table/grid a unique id, then add a new guarded section at the end of app.js following the pattern of the existing sections (see 8.4).

10.2 Remove a page or menu item

Delete the HTML file and remove its <a class="sb-link"> element from the sidebar of every other page. Use Find in Files with the file name (for example gift-cards.html) to see every place that links to it.

10.3 Going offline and production

• Icons: self-host Lucide (npm i lucide) and replace the CDN <script> tag with your local copy of lucide.min.js.
• Bootstrap / jQuery / Chart.js: each page loads these from cdn.jsdelivr.net and code.jquery.com. Install them with npm and swap the <script>/<link> tags for your local copies.
• Fonts: download the Google Fonts you use, add @font-face rules to style.css and remove the Google Fonts <link>.
• Avatars: demo customer/team photos load from randomuser.me. Find randomuser.me and point avatars at your own images.
• Hosting: upload the folder to any static host (Netlify, Vercel, GitHub Pages, S3, shared hosting). No server code is required.

10.4 Connect a backend

The template contains only front-end code and demo data. Typical steps: render table rows and KPI values from your API, submit modal forms with fetch() instead of the demo validation handlers, replace the hard-coded admin/admin check in the login section of app.js with a real auth API call, and generate real invoices/CSV exports on the server. Because every page is a static file with no framework lock-in, you can also convert the shared sidebar, topbar and footer into includes or components in your own stack (PHP, Laravel, Django, Next.js and others).

11. Accessibility

• Semantic landmarks: aside, nav, header, main and footer.
• Icon-only buttons carry a title attribute; Bootstrap dropdowns, offcanvas drawers and modals use their built-in ARIA attributes.
• Visible focus states on inputs, links and buttons throughout.
• Colours are CSS tokens, so you can adjust contrast globally (see 7.2).

12. Troubleshooting and FAQ

Icons show as empty squares

Lucide could not load. Check your internet connection, or self-host it (see Going offline).

Avatars do not show

Demo avatars come from an external service (randomuser.me). This is expected and falls back to initials automatically — replace them with your own images for production.

My CSS or JS changes do not appear

Hard refresh with Ctrl+F5 (Cmd+Shift+R on macOS).

Charts are empty or buttons do nothing

A JavaScript error stops the page script. Open the browser console (F12), fix the error, and make sure app.js is loaded with the correct relative path and after jQuery, Bootstrap and Chart.js.

Is this a real, working store?

No — all data (orders, customers, products, numbers) is realistic placeholder content. Buttons like "New order", "Add product" and "Export CSV" work as real front-end interactions (forms validate, files download, toasts confirm actions), but there is no database behind them.

Can I use it with React, Vue, Laravel or Django?

Yes. Copy style.css, reuse the markup, and adapt the small pieces of logic in app.js to your framework (see Connect a backend).

13. Credits, sources and changelog

All names, numbers and emails in the demo are fictional.

Changelog

1.0.0 (2026): initial release with the Dashboard, 28 application pages, login and register, light and dark mode, live customizer and a responsive layout.

Support

For help, please use the support channel of the marketplace where you purchased the template, and include the page name and browser you are using.