Documentation

Superbyte UI · v1.0.0

html · css · vanilla js

Getting started

Superbyte UI is a lightweight, dependency-free admin template built with plain HTML, CSS and vanilla JavaScript on top of Bootstrap 5. There is no build step — every page is a self-contained file you can open directly in the browser.

The dashboard lives in the preview/ folder; the root index.html is the product landing page that links into it. Open preview/index.html or run any local static server such as npx serve or Python's python -m http.server. No server is required: all assets ship locally under vendor/, so the template works fully offline.

File structure

superbyte-admin/
├─ index.html          Landing page about the UI kit
├─ assets/             Shared design system (css/js/img)
│  ├─ css/app.css      Design system: tokens + components
│  ├─ css/landing.css  Landing page styles
│  ├─ js/app.js        Shared logic: theme, sidebar, toasts
│  └─ img/favicon.svg
├─ vendor/             Local libraries — no CDN required
│  ├─ bootstrap/       CSS + JS bundle (5.3.3)
│  ├─ hugeicons/       HugeIcons Stroke-Rounded CSS + webfonts
│  ├─ chart.js/        UMD build (4.4.1)
│  ├─ fonts/           Ubuntu + Ubuntu Mono (woff2)
│  └─ fonts.css        Local @font-face declarations
└─ preview/            The admin dashboard (47 pages)
   ├─ index.html       Dashboard (charts, stats, activity)
   ├─ analytics.html   Analytics (bar chart, top pages)
   ├─ records.html     Records (sortable data table)
   ├─ users.html       Users (team grid)
   ├─ forms.html       Forms (inputs, selects, switches)
   ├─ elements.html    Buttons & Badges
   ├─ cards.html       Cards & Alerts
   ├─ overlays.html    Modals & Tabs
   ├─ utilities.html   Utilities (progress, pagination, toasts)
   ├─ docs.html        This documentation page
   └─ …                + 36 more pages

Pages

Navigation links in the sidebar are regular <a> elements pointing at the corresponding file. Each page marks its own entry with the active class and hard-codes its breadcrumb label, so there is no routing layer to maintain.

File	Purpose
index.html	KPI stat cards, revenue line chart, traffic doughnut, activity feed, team quota.
analytics.html	Sessions vs conversions bar chart, key metrics, top pages table.
records.html	Filterable, sortable data table with row selection, bulk delete and a right-click context menu.
users.html	Responsive team member grid with status dots.
forms.html	Project settings form, field variations, file upload dropzone.
elements.html	Buttons, segmented controls, badges, tags, status dots, icon tiles.
cards.html	Feature cards, alert variants, empty state.
overlays.html	Modal dialogs, accordion, vertical tabs.
utilities.html	Progress bars, pagination, tooltips & popovers, toast demos.

Customization

Open the palette icon in the toolbar to access the theme customizer. Choices persist across every page via localStorage and are re-applied automatically on load.

Appearance

Dark and light modes are toggled with the data-bs-theme attribute on <body>. All colors are CSS custom properties defined in ../assets/css/app.css, so you can also restyle the whole template by overriding a handful of tokens:

:root {
  --bg: #0a0b0f;      /* app background   */
  --surface: #111318; /* cards, sidebar    */
  --surface2: #181b23;/* inputs, headers   */
  --surface3: #1f2330;/* hovers, toasts    */
  --border: #252a38;  /* hairline borders  */
  --text: #e2e8f0;    /* primary text      */
  --text2: #94a3b8;   /* secondary text    */
  --text3: #64748b;   /* muted text        */
}

Accent color

The accent (primary color) is applied at runtime to the --accent, --accent-h, --accent-bg and --bs-primary* tokens. The bundled swatches are indigo, violet, fuchsia, pink, teal, sky, lime and orange.

Corner radius

Three radius presets (sharp / default / round) remap --radius and --radius-sm.

Stored preferences

Key	Values
grid_admin_theme	`dark` \| `light`
grid_admin_accent	`indigo`, `violet`, `fuchsia`, `pink`, `teal`, `sky`, `lime`, `orange`
grid_admin_radius	`4px` \| `8px` \| `14px`

Clear them all with localStorage.clear() in the console to reset to the defaults.

Charts

Chart.js is only loaded on the pages that use it (index.html and analytics.html). Each of those pages defines its own initCharts() function and registers it as the shared chart hook:

function initCharts() {
  // ... build charts from themeVars() ...
}
window.__chartInit = initCharts;

../assets/js/app.js calls refreshCharts() (which invokes __chartInit when present) every time the theme, accent or radius changes, so charts always re-render in the correct colors. Use themeVars() to resolve the active CSS token values at render time.

Adding a new page

Copy any existing page and rename the <title> and breadcrumb label.
Mark its sidebar link active and clear active from the others.
Drop your content inside <div id="content"> using the shared card, btn, form-control, data-table classes.
Include the scripts at the end of the body. For chart pages, load ../vendor/chart.js/chart.umd.min.js before your inline initCharts.
Link the new file from the sidebar in every page.

Vendors & licenses

All third-party libraries are bundled locally so the template works without an internet connection.

Library	Version	License
Bootstrap	5.3.3	MIT
HugeIcons Stroke-Rounded	—	CC BY 4.0 / OFL 1.1
Chart.js	4.4.1	MIT

Quick reference

theme Toggle dark/light instantly accent 8 presets, persisted radius Sharp / Default / Round charts Re-render on theme change tables Sort + bulk actions

Common classes

card card-header / card-title btn / btn-primary / btn-ghost form-control / form-select data-table tag tag-* stat-card empty-state

Keyboard tips

Enter Activate focused nav / buttons Click Column headers sort the table Right-click Context menu on table rows Scroll Sidebar sections stay sticky

Changelog

v2.4.0

Saved views, bulk record actions, right-click row menu, fresh accent palette.

v2.3.0

Split into standalone pages; local vendor assets; live theme persistence.