Sitewright

BoardUI-style Overview

A shop dashboard built from the BoardUI-style components with six working views: an overview (period switch, four KPI cards with info tips, revenue and orders charts against last year, recent customers), a customers table with sort, filters, selection and edit, reports with CSV export, a notification inbox shared with the bell, support and settings forms.

What it is for

Shop, SaaS or subscription admin home: revenue, orders, customers, notifications.

The sidebar collapses to a rail and the layout follows its container.

Add it to a site

1 · site.json
"effects": { "templates": ["boardui-overview"] }
or on the command line
node ~/.claude/skills/sitewright/scripts/scaffold.mjs --config site.json --out ./my-site --templates boardui-overview
2 · import it
import BoardUIOverview from '@/components/fx/tpl/BoardUIOverview';

Files

  • components/fx/tpl/BoardUIOverview.tsx
  • components/fx/tpl/_dash.tsx
  • components/fx/tpl/../ui/DashboardSidebar.tsx
  • components/fx/tpl/../ui/StatCards.tsx
  • components/fx/tpl/../ui/RevenueChartCard.tsx
  • components/fx/tpl/../ui/OrdersChartCard.tsx
  • components/fx/tpl/../ui/SegmentedControl.tsx
  • components/fx/tpl/../ui/NotificationCenter.tsx
  • components/fx/tpl/../ui/DataTable.tsx
  • components/fx/tpl/../ui/_bui.tsx
  • components/fx/tpl/../ui/_bui-pop.tsx
  • components/fx/tpl/../ui/_bui-chart.tsx
  • components/fx/tpl/../ui/LICENSE-boardui.txt
  • ui-bui-base.css styles
  • ui-bui-chart.css styles
  • ui-segmented-control.css styles
  • ui-stat-cards.css styles
  • ui-notification-center.css styles
  • ui-data-table.css styles
  • ui-dashboard-sidebar.css styles
  • tpl-boardui-overview.css styles

About it

Adapted from BoardUI (MIT), composed into a new screen; the upstream licence and notice are kept (see THIRD_PARTY_NOTICES.md). Demo data is fictional and deterministic. Every control on the page works, so try it before you take it.

It answers its own width rather than the screen's, so the tablet and phone buttons show the real responsive behaviour. Templates are not components: they are chosen with templates, not components.