One kit.
Every operation.
The Shopeers B2B eCommerce kit, now with 14 workspaces — logistics, F&B, finance, CMMS, enterprise ops, glasshouse wedding venue, marketing, AutoCount-style accounting, CRM, healthcare, education, property and travel. Over 150 pages, one design system, one module engine and page-to-page transitions that feel like a single app.
Dashboard & pages
Pages for the selected workspace. Each opens in the app shell from assets/js/app.js.
Colour & theme tokens
Live values from assets/css/shopeers.css — toggle dark mode to compare. Click a swatch to copy its variable.
Brand
Surfaces & borders
Text
Semantic
Gradients
Sampled from the Dribbble reference
| Element | Pixel | Token |
|---|---|---|
| Export button (top → bottom) | #2862FF → #3A76FE | --sp-primary-grad |
| Active nav background / text | #ECF3FE / #1659DD | --sp-primary-soft / --sp-primary-text |
| Page background | #F5F7F9 | --sp-bg |
| Card border | #E8EAEC | --sp-border |
| Delta up (bg / ink) | #E7F6EF / #21B35F | --sp-success-soft / --sp-success |
| Delta down (bg / ink) | #FCE7EC / #C5345E | --sp-danger-soft / --sp-danger-text |
| Wholesalers bar · rating star · gauge | #F78429 #E7B832 #31C281 | --sp-warning --sp-amber --sp-gauge |
| Premium card | #2962EA → #273F89 → #151928 | --sp-premium-grad |
Typography
Inter 400–800 (Google Fonts) with cv11 ss01 ss03 features, tight tracking on numbers.
Motion & transitions
Every page change is animated by assets/js/app.js + section 15 of shopeers.css. Nothing to wire up per page — add data-no-transition to a link or data-no-motion to <body> to opt out.
Cross-page View Transitions
@view-transition { navigation: auto }. Sidebar and topbar have their own view-transition-name so they stay still; the active nav pill slides to the new item; content cross-fades. Chrome / Edge 126+.
Staggered entrance
On load, cards, rows and the page header get .sp-enter with --i → they rise in 45 ms apart. Only blocks above the fold are delayed, so long pages never feel slow.
Navigation progress bar
Starts on click, survives the page load (sessionStorage) and completes on the next page — like a single-page app.
Fallback leave
Browsers without View Transitions get html.sp-leaving: the content fades and drops 6 px for 170 ms before navigating. Back/forward cache is handled.
Micro-interactions
Dropdowns scale in, modals rise, drawers ease, tab panes slide, tables cross-fade on filter (.sp-swap), routes draw and vehicles travel.
Reduced motion
prefers-reduced-motion: reduce turns off view transitions, staggers, floats and route animations; everything renders in its final state.
Try it
<a href="fleet.html">Fleet</a> <!-- animated automatically -->
<a href="report.pdf" data-no-transition>PDF</a> <!-- opt out per link -->
<section data-enter>…</section> <!-- force a custom block into the stagger -->
el.classList.add('sp-swap') // cross-fade re-rendered content
Buttons
Bootstrap .btn re-skinned. Primary uses the gradient + inner highlight from the Export button.
Variants
Outline
Sizes, shapes & states
Groups
<button class="btn btn-primary"><iconify-icon icon="ph:download-simple-bold"></iconify-icon>Export</button>
<div class="sp-segmented"><button class="active">Day</button><button>Week</button></div>
Badges & status
Delta pills from the KPI cards, status dots, hashtag chips, counters.
Delta
Status
Tags, counts & Bootstrap badges
Cards & stats
.sp-card, KPI .sp-stat, Customers .sp-segbox, mini stats with sparklines, icon tiles, premium & banner cards.
Customers
Icon tiles
Upgrade card (sidebar)
Upgrade to Premium!
Upgrade your account and unlock all of the benefits.
Card with footer
Low stock
3 products below reorder point
Forms & inputs
Native inputs plus Select2, DateRangePicker, Inputmask, noUiSlider — all themed in assets/css/plugins.css.
Tables
.sp-table (Best Selling Products), the boxed variant, and DataTables themed to match.
Best Selling Products
| ID | Name | Sold | Revenue | Rating |
|---|
.sp-table.is-boxed + bulk selection
| Customer | Type | Spent | Status |
|---|
DataTables
| Order | Customer | Channel | Items | Total |
|---|
Alerts, toast & popup
SP.toast() and SP.confirm() from assets/js/app.js, SweetAlert2 themed, tooltips, progress.
Alerts
Toast · SP.toast(message, type, options)
SP.toast('Widget removed', 'info', { title: 'Done', duration: 4000, action: 'Undo', onAction: restore });
Confirm · SP.confirm({...}) → Promise<boolean> & SweetAlert2
Progress & spinners
Quick Action (Ctrl K)
Command palette: pages, actions, products, customers and orders, scope chips, recent items, “Ask AI”. Files: components/quick-action.js + .css, items in data/quick-action-data.js, wired in assets/js/app.js.
Trigger
Style · app pages open Spotlight, centered. These cards preview the other layouts here.
Keyboard
Items
| Group | Label | Target | Icon | Shortcut |
|---|
Use in a page
<link rel="stylesheet" href="components/quick-action.css?v=20261012i">
<script src="components/quick-action.js?v=20261012"></script>
<script>
const qa = SpQuickAction.init({
style: 'spotlight', // default | spotlight | sidebar | compact
items: [{ group: 'Pages', label: 'Orders', icon: 'ph:tray', href: 'orders.html', keywords: 'sales', shortcut: 'G O' }],
onSelect: item => { if (item.action) { run(item); return false; } },
onAsk: q => askAssistant(q) // shows the “Ask AI” row
});
</script>
<!-- any [data-quick-action] element opens it; Ctrl/⌘ K anywhere -->
Modal & drawers
Bootstrap modal/offcanvas re-skinned; .sp-drawer is the floating Add Widget panel.
Avatars & people
Sizes, presence, initials, groups and the person row used in tables.
LHMT
+4
Skeleton & empty states
.sp-skel shimmer and .sp-empty.
No orders yet
When customers place orders they’ll show up here.
Logistics components
Renderers in assets/js/sp-logistics.js (SPL.*), styles in section 16 of shopeers.css, sample data in data/logistics-data.js. Used by Warehouse, Fleet, Air Freight, Sea Freight and Customs.
SPL.route · air
SPL.route · sea + port calls
SPL.route · road
SPL.journey(steps, current)
Status pipeline (.sp-pipe)
Vertical journey
SPL.fleetMap — click a vehicle
Containers (.sp-container)
Rings, meters & heat cells
Customs lanes
Document checklist (.sp-docs)
Vehicle list item & quote option
Workspaces & module engine
14 workspaces in SP_MENU.suites (data/app-data.js). The sidebar switcher shows the workspace that owns the current page. Every module page is rendered by assets/js/sp-module.js from a definition in data/modules/<workspace>.js: stats, clickable workflow strip, table / board / cards views, drag-and-drop between stages, a drawer with journey, approval chain, notes and activity log, plus a "New" form.
A module definition (data/modules/fnb.js)
SPM_DEFS.push({
id: 'kds', entity: 'Ticket', ref: 'KT-', view: 'board',
stages: ['New', 'Cooking', 'Ready', 'Served'], terminal: ['Recalled'],
verbs: { Ready: 'Bump to pass' },
cols: [['ref', 'Ticket', 'ref'],
['items', 'Items', ['Nasi Lemak Ayam ×2', 'Roti Canai ×3']],
['station', 'Station', ['Wok', 'Grill', 'Drinks']],
['age', 'Waiting', 'ago:1,24'], ['stage', 'Status', 'stage']],
kpis: [['Open tickets', 'open', 'ph:receipt'], ['Ready', 'stage:Ready', 'ph:bell']],
side: [{ type: 'alerts', items: [...] }, { type: 'breakdown', by: 'station' }]
});Side panels (side: [{ type }])
Column generators
ref person company branch money:min,max num:min,max,unit dec:… pct:… date:-30,0 due:0,30 ago:min,max time:8,20 or an array to pick from. Seeded, so every visit shows the same data.
Try the flagship flows
Charts
assets/js/sp-charts.js — ApexCharts + hand-made SVG/HTML. Colours come from tokens and re-theme on sp:theme.
Total Profit · SPCharts.profit()
Most Day Active · dayBars()
Repeat Customer Rate · gauge()
donut()
radial()
bars() · stacked
line() · area
SPCharts.profit('#el', { thisMonth: [...], lastMonth: [...] });
SPCharts.gauge('#el', 68, { sub: 'On track for 80% target', action: 'Show details' });
SPCharts.dayBars('#el', [{ d: 'Tue', v: 8162 }, …], { active: 2, onSelect: (d) => … });
AI Assistant
Orb, dotted halo, suggestion chips, chat bubbles and the pill input. Full page opens the same assistant across the app shell.
Authenticator (TOTP)
Settings → Security. A 6-digit code, HMAC-SHA1, 30 seconds. This preview uses a fixed demo secret and does not change the one saved in your browser.
Set up authenticator
Scan the QR with Google Authenticator, 1Password, or any TOTP app.
Authenticator code
Enter the 6-digit code from your app. It refreshes every 30 seconds.
SPTotp.mount({ status: 'stTotpStatus', setup: 'stTotpSetup', live: 'stTotpLive', code: 'stTotpCode', … });
/* RFC 6238 · HMAC-SHA1 · 6 digits · 30s · secret in localStorage key sp-totp-secret */
Calendar
FullCalendar 6 (assets/libs/fullcalendar) with token-based theme and soft event colours.
Editor & upload
Quill rich text and Dropzone (demo — nothing is uploaded).
Quill
Write a product description for your B2B buyers…
Dropzone
Icons
Phosphor via iconify-icon — regular for idle, -fill for active/emphasis, -duotone for illustrations. Click to copy.
<iconify-icon icon="ph:tray"></iconify-icon> <iconify-icon icon="ph:tray-fill"></iconify-icon>Logo & images
Inline SVG logo (SP.logo), assets/img/favicon.svg, avatars in assets/img/avatars. Brand name is set once in data/app-data.js → SP_CONFIG.brand.
favicon.svgAvatars
Library inventory
Copied from 01/assets/libs into 02/assets/libs (only the dist files) so 02 is self-contained.
| Library | Used for | Entry file |
|---|
Folder structure
How to reuse this template in a new project.
Template/web/02/ ├── index.html ← this component library ├── pages/ │ ├── dashboard.html/.js/.css ← Shopeers dashboard (KPIs, profit, segments, day bars, gauge, AI, Add Widget) │ ├── orders.html ← tabs, filters, bulk actions, order drawer, create-order modal │ ├── products.html ← grid / list, categories, add-product drawer + Dropzone │ ├── customers.html ← segments, gauge, sortable table, profile drawer, invite modal │ ├── invoices.html ← summary sparklines, status filter, printable invoice preview │ ├── analytics.html ← KPIs, traffic, channel donut, funnel, category bars, heatmap │ ├── settings.html ← profile / store / team / billing / notifications / security + save bar │ ├── sidebar.html ← shell variants (expanded · mini · mobile) │ ├── blank.html ← starter page (?page=content|online-store|transactions|reports|discounts|help) │ ├── error.html ← 404 / 403 / 500 / 503 (?code=404) │ ├── modules.html ← hub: every workspace and module, searchable │ ├── warehouse · fleet · air-freight · sea-freight · customs (+ submenu pages) ← logistics │ ├── logistics/ fnb/ finance/ facilities/ ops/ venue/ marketing/ accounting/ │ │ crm/ health/ edu/ property/ travel/ commerce/ │ │ ← one folder per workspace: index.html (overview) + module pages │ ├── marketing/landing.html ← standalone landing page (+ thank-you.html, landing.css) │ ├── marketing/cta.html ← CTA module: SaaS, Minimal, Agency (open full screen in a new tab) │ └── pages.css ← page-level pieces ├── assets/ │ ├── css/shopeers.css ← tokens (light + dark) + every sp-* component │ ├── css/plugins.css ← Select2, DateRangePicker, noUiSlider, FullCalendar, DataTables, Quill, Dropzone, SweetAlert2 │ ├── js/app.js ← shell (sidebar, topbar, theme, Esc), SP.toast, SP.confirm, Quick Action wiring, shortcuts │ ├── js/sp-charts.js ← profit, gauge, dayBars, donut, bars, line, spark, radial │ ├── js/sp-logistics.js ← SPL.route, journey, fleetMap, rings, meters │ ├── js/sp-module.js ← module engine (SPM): KPIs, workflow, table/board/cards, drawer, side panels │ ├── img/ ← favicon.svg, avatars/ │ └── libs/ ← bootstrap 5.3, apexcharts, fullcalendar, select2, … (dist only) ├── components/quick-action.* ← Ctrl K palette (4 styles) ├── data/app-data.js ← SP_CONFIG (brand/user), SP_MENU, SP_DATA (products, customers, orders, invoices…) ├── data/quick-action-data.js ← palette items ├── data/logistics-data.js ← warehouses, vehicles, AWBs, containers, customs ├── data/modules/*.js ← module definitions per workspace (SPM_DEFS) └── preview/ ← library page chrome (preview.css, preview.js)