Novus Admin Kit

A complete, realistic enterprise starting point built on the design kit: a novapay operations console with a dashboard, a filterable transactions table, a terminal fleet view, and settings. It ships in two flavors with strict screen parity, both consuming the published novus-design-kit package. Copy a flavor folder from the repository and start from a working, on-brand application.

6screens per flavor

2flavors, one dataset

0tokens or logins to run

Screens and conventions

Dashboard: KPI stat row, signal cards (risk always red, watch amber), recent transactions.
Transactions: data-dense table, status filter, native detail dialog, plain empty state.
Terminals: fleet health with degraded and offline devices sorted first.
Settings: profile form (demo only, says so) and the persisted theme toggle.
Analytics: hourly volume by product, stacked composition bars with a total trajectory line, styled by the locked Novus chart rules (token-fed at runtime).
Data grid: all transactions with column sorting, search, and 10-per-page pagination (Blazor QuickGrid; progressive enhanced table in the Tailwind flavor).
Internal-tool header (app identity left, Novus endorsement right), sidebar that collapses to a native menu on mobile, traffic-light colour only on judgement chips, amounts always neutral, self-describing chips, dual-trigger dark mode, JS-off navigation.

Novus Admin Kit with Blazor

Blazor Web App (.NET 10): server-rendered pages, InteractiveServer only on the transactions filter and detail dialog. Verified 2026-08-27; screenshots below are from the verified run, and every image opens the live demo. The hosted demo is a WebAssembly build (requires JavaScript); the copyable flavor is server-rendered and works without it.

# copy admin-kits/blazor from the repository, then
npm install     # pulls novus-design-kit; the build copies it to wwwroot/lib
dotnet run

Open the live demo

blazor flavor: Dashboard, light — Dashboard, light

blazor flavor: Dashboard, dark — Dashboard, dark

blazor flavor: Analytics: token-fed chart — Analytics: token-fed chart

blazor flavor: Data grid: sort, search, pages — Data grid: sort, search, pages

blazor flavor: Transactions with filter and dialog — Transactions with filter and dialog

blazor flavor: 375px, no horizontal scroll — 375px, no horizontal scroll

Novus Admin Kit with Tailwind

Vite multi-page app with Tailwind utilities mapped to the Novus tokens (the verified theme-guide pattern); vanilla JS only for the filter, dialog, and toggle. Verified 2026-08-27.

# copy admin-kits/tailwind from the repository, then
npm install
npm run dev     # or: npm run build && npm run preview

Open the live demo

tailwind flavor: Dashboard, light — Dashboard, light

tailwind flavor: Dashboard, dark — Dashboard, dark

tailwind flavor: Analytics: token-fed chart — Analytics: token-fed chart

tailwind flavor: Data grid: sort, search, pages — Data grid: sort, search, pages

tailwind flavor: Transactions with filter and dialog — Transactions with filter and dialog

tailwind flavor: 375px, no horizontal scroll — 375px, no horizontal scroll

Parity and data

One dataset (admin-kits/data/dataset.json) generates both flavors' data; regenerate and diff to prove parity.
Figures are illustrative; no client names appear in the demo data.
Dashboards use stat rows and signal cards, the kit's own convention, instead of a charting library.