Component library

Dashboard

• <KPI>

  sharedStatsDashboard

  Single metric tile with optional trend indicator.

  When to use: Use for headline numbers (manual hours, error rate, ROI). Always inside a <KPIGrid>.

  Often with: KPIGrid

  Preview

  Manual hours / week

  142

  Across operations, finance and HR

  Prop	Type	Notes
  label	string	Required. Short metric label.Example: Manual hours / week
  value	ReactNode	Required. The displayed value.Example: 142
  trend	"up" | "down" | "flat" | "baseline"	Optional. Default: baseline. Movement direction. 'baseline' means this is a starting measurement.Values: up, down, flat, baselineExample: down
  trendValue	string	Optional. Magnitude of the trend.Example: −42%
  isPositiveDirection	"higher" | "lower"	Optional. Default: lower. Whether higher is better. Affects whether up/down arrow is green or red.Values: higher, lowerExample: lower
  description	string	Optional. Optional supporting line beneath the value.Example: Across operations, finance and HR

  Examples

  <KPI label="Manual hours / week" value="142" description="Across operations, finance and HR" trend="baseline" />

• <KPIGrid>

  sharedStatsDashboard

  Grid of KPI tiles. Responsive: collapses to 1 column on mobile.

  When to use: Wrap 2–4 KPIs together. Place at the top of a section under '## At a glance'. In SEO reports, typical KPIs are organic sessions, keywords in top 10, referring domains, and share of non-branded traffic.

  Often with: KPI

  Preview

  Use cases identified

  12

  First-wave candidates

  6

  Hours saved / month

  380

  −42% manual effort

  Prop	Type	Notes
  columns	2 | 3 | 4	Optional. Default: 4. Desktop column count.Values: 2, 3, 4Example: 3
  children	ReactNode	Required. One or more <KPI> elements.

  Examples

  <KPIGrid columns={3}>
      <KPI label="Use cases identified" value="12" />
      <KPI label="First-wave candidates" value="6" />
      <KPI label="Hours saved / month" value="380" trend="down" trendValue="−42% manual effort" isPositiveDirection="lower" />
  </KPIGrid>

• <AnalyticsCard>

  sharedStatsDashboard

  Single-card analytics summary: title and subtitle, optional kebab affordance, a hero row (icon + label + large value), and a 2×2 grid of sub-metrics with tinted icon chips, values, and either a static caption or a success-styled trend line.

  When to use: Use for report readouts that mirror product analytics tiles (adoption, pipeline, programme health). Pair two cards inside `<TwoColumn>` for side-by-side comparisons. Keep copy factual; do not invent metrics.

  Preview

  User analytics

  Platform user insights

  Total users

  10,590

  Free users

  10,074

  95% of total users

  Paid users

  516

  +2.5% from last month

  New users

  1,200

  +5,238 from last month

  Most active

  480

  Weekly active

  Prop	Type	Notes
  title	string	Required. Card title.Example: User analytics
  subtitle	string	Optional. Muted line under the title.Example: Platform user insights
  heroIcon	"users" | "folder" | "projects"	Required. Icon in the hero row.Values: users, folder, projectsExample: users
  heroLabel	string	Required. Label beside the hero icon.Example: Total users
  heroValue	string	Required. Large headline figure.Example: 10,590
  stats	AnalyticsCardStat[]	Required. Exactly four objects (2×2 grid). Each stat: `label`, `value`, `icon` (users|folder|pie|trend|clock|target|percent|building), `iconTone` (brand|warning|success|indigo|emerald|rose|slate), optional `caption`, or `trendValue` + optional `trendSuffix` for a green trend line.
  showMenu	boolean	Optional. Default: true. Show the illustrative kebab button.

  Examples

  <AnalyticsCard
      title="User analytics"
      subtitle="Platform user insights"
      heroIcon="users"
      heroLabel="Total users"
      heroValue="10,590"
      stats={[
          { label: "Free users", value: "10,074", icon: "pie", iconTone: "indigo", caption: "95% of total users" },
          { label: "Paid users", value: "516", icon: "percent", iconTone: "emerald", trendValue: "+2.5%", trendSuffix: "from last month" },
          { label: "New users", value: "1,200", icon: "users", iconTone: "brand", trendValue: "+5,238", trendSuffix: "from last month" },
          { label: "Most active", value: "480", icon: "clock", iconTone: "warning", caption: "Weekly active" }
      ]}
  />

• <MiniStatCard>

  sharedStatsDashboard

  Compact metric card with a headline value, a coloured label, and a badge icon. The body below the header is configurable via `display`: a sparkline/donut chart, a short supporting paragraph, or empty (header only). Use inside `<MiniStatGrid>`.

  When to use: Use when a report needs a 2×2 (or wider) grid of at-a-glance metrics. Mix `display="chart"` for tiles that show a trend, `display="text"` for tiles that need a short qualitative note (e.g. "Up from £8,100 last quarter"), and `display="none"` for compact value-only tiles. Pair with `<MiniStatGrid>` to lay out tiles side by side.

  Often with: MiniStatGridKPIKPIGrid

  Preview

  $10,230

  Expense

  $65,432

  Sales

  £48k

  Pipeline

  Up from £42k last month, driven by Q3 supplier renewals.

  3

  Active reports

  Prop	Type	Notes
  value	string	Required. Main headline metric, e.g. "$10,230".Example: $10,230
  label	string	Required. Short label below the value, e.g. "Expense".Example: Expense
  icon	"credit-card" | "shopping-bag" | "shopping-cart" | "bar-chart" | "trend-up" | "line-chart" | "wallet"	Required. Icon displayed in the top-right badge.Values: credit-card, shopping-bag, shopping-cart, bar-chart, trend-up, line-chart, walletExample: credit-card
  display	"chart" | "text" | "none"	Optional. What to render below the header. `chart` requires `chart` + `data`; `text` requires `text`; `none` renders the header only. If omitted, the type is inferred from which props are present (chart+data → chart, otherwise text → text, otherwise none).Values: chart, text, noneExample: chart
  chart	"donut" | "bar" | "line"	Optional. Type of embedded chart (only used when `display="chart"`). `donut` = ring chart (2+ segments); `bar` = vertical bar sparkline; `line` = monotone line sparkline.Values: donut, bar, lineExample: donut
  data	number[]	Optional. Data for the chart (only used when `display="chart"`). Donut: two or more segment values (proportional), e.g. [70, 30]. Bar/Line: ordered series of values, e.g. [3, 8, 5, 12, 7, 15, 9].Example: [70, 30]
  text	string	Optional. Short supporting paragraph (only used when `display="text"`). Keep it to one or two sentences; longer copy is cropped visually.Example: Up from £8,100 last quarter, driven by Q3 supplier renewals.

  Examples

  <MiniStatGrid columns={2}>
    <MiniStatCard value="$10,230" label="Expense" icon="credit-card" display="chart" chart="donut" data={[70, 30]} />
    <MiniStatCard value="$65,432" label="Sales" icon="shopping-bag" display="chart" chart="bar" data={[8, 10, 9, 11, 10, 12, 11, 13, 12, 14, 13, 15]} />
    <MiniStatCard value="£48k" label="Pipeline" icon="trend-up" display="text" text="Up from £42k last month, driven by Q3 supplier renewals." />
    <MiniStatCard value="3" label="Active reports" icon="bar-chart" display="none" />
  </MiniStatGrid>

• <MiniStatGrid>

  sharedStatsDashboard

  Responsive grid wrapper for `<MiniStatCard>` tiles, defaulting to a 2-column layout.

  When to use: Wrap two or more `<MiniStatCard>` components inside `<MiniStatGrid>` to produce the 2×2 (or wider) tile layout. Set `columns` to 3 or 4 if you have more tiles.

  Often with: MiniStatCard

  Preview

  $10,230

  Expense

  $65,432

  Sales

  £48k

  Pipeline

  Up from £42k last month, driven by Q3 supplier renewals.

  3

  Active reports

  Prop	Type	Notes
  children	ReactNode	Required. `<MiniStatCard>` elements.
  columns	2 | 3 | 4	Optional. Default: 2. Number of columns at the desktop breakpoint.Values: 2, 3, 4Example: 2

  Examples

  <MiniStatGrid columns={2}>
    <MiniStatCard value="$10,230" label="Expense" icon="credit-card" display="chart" chart="donut" data={[70, 30]} />
    <MiniStatCard value="$65,432" label="Sales" icon="shopping-bag" display="chart" chart="bar" data={[8, 10, 9, 11, 10, 12, 11, 13, 12, 14, 13, 15]} />
    <MiniStatCard value="£48k" label="Pipeline" icon="trend-up" display="text" text="Up from £42k last month, driven by Q3 supplier renewals." />
    <MiniStatCard value="3" label="Active reports" icon="bar-chart" display="none" />
  </MiniStatGrid>