Component library

Showing 11 components with role stats.

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>
```

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.

<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" }
    ]}
/>

<FinanceOverviewCard>

financeStatsChartDashboard

Two-column financial headline: left block (title, date range, total revenue with optional delta and footnote), right block (product condition headline, optional trend pill, year selector, multi-series monotone area chart), plus a three-column footer row for supporting metrics.

When to use: Use for executive-style revenue or adoption snapshots in report readouts. Pass `chartMonths` and aligned `chartSeries[].values`; include at least one series (empty shows a muted placeholder). Keep series count to 2–4 for clarity. Footer `stats` should contain exactly three items.

Preview

Financial income

1 Aug 2025 – 1 Nov 2025

Total revenue+9.78%

£8,240.00

Increased 15% from last month

Product condition

75%2.8%

Selling product

£335,000

Followers

1,500

Campaign

560

Prop	Type	Notes
dateRange	string	Required. Human-readable range under the income title.Example: `1 Aug 2025 – 1 Nov 2025`
totalRevenueValue	string	Required. Large headline currency string.Example: `£8,240.00`
incomeTitle	string	Optional. Default: `"Financial income"`. Left column title.
totalRevenueLabel	string	Optional. Default: `"Total revenue"`. Label above the headline figure.
totalRevenueDelta	string	Optional. Optional percentage chip; leading + uses success colour, leading − uses error.
totalRevenueFootnote	string	Optional. Muted line under the revenue figure.
conditionValue	string	Required. Large headline next to the chart header.Example: `75%`
conditionTitle	string	Optional. Default: `"Product condition"`. Muted label above the condition value.
conditionBadgeText	string	Optional. Pill text beside the condition value.Example: `2.8%`
conditionBadgeTrend	"up" \| "down"	Optional. Default: `down`. Arrow direction inside the pill.Values: up, down
years	string[]	Optional. Default: `["2025"]`. Year `<select>` options.
chartMonths	string[]	Required. X-axis labels in order (e.g. Jan … Jul).
chartSeries	{ name: string; values: number[]; colorKey: "brand"\|"sky"\|"slate" }[]	Required. One or more series; each `values` array must match `chartMonths` length. If empty, a muted placeholder is shown instead of the chart.
stats	{ label: string; value: string; labelTone?: "brand"\|"sky"\|"emerald" }[]	Required. Exactly three footer metrics.

Examples

<FinanceOverviewCard
    dateRange="1 Aug 2025 – 1 Nov 2025"
    totalRevenueDelta="+9.78%"
    totalRevenueValue="£8,240.00"
    totalRevenueFootnote="Increased 15% from last month"
    conditionValue="75%"
    conditionBadgeText="2.8%"
    years={["2024", "2025", "2026"]}
    chartMonths={["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]}
    chartSeries={[
        { name: "Series A", values: [1200, 1800, 2200, 2600, 3000, 3400, 3800], colorKey: "sky" },
        { name: "Series B", values: [800, 1100, 1400, 1700, 2100, 2500, 2900], colorKey: "brand" },
        { name: "Series C", values: [400, 500, 600, 700, 800, 900, 1000], colorKey: "slate" }
    ]}
    stats={[
        { label: "Selling product", value: "£335,000", labelTone: "sky" },
        { label: "Followers", value: "1,500", labelTone: "sky" },
        { label: "Campaign", value: "560", labelTone: "emerald" }
    ]}
/>

<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.

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>
```

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`

<PortfolioSummaryCard>

financeStatsDataDashboard

Headline portfolio card: NAV or AUM with optional delta pill and a grid of supporting metrics (returns, volatility, tracking error, cash, etc.).

When to use: Use at the top of a portfolio or rebalancing report for the headline snapshot. Pair with `<AllocationDriftChart>` and `<RebalanceTradeList>` in the sections below.

Often with: KPIKPIGridFinanceOverviewCardAnalyticsCard

Preview

Balanced growth portfolio

As of 31 May 2026

NAV

£24.6m

+1.8% MTD

YTD return

+4.2%

Volatility (1y)

9.1%

Tracking error

42 bps

Cash

8.2%

Prop	Type	Notes
title	string	Optional. Default: `"Portfolio summary"`. Card heading.
asOf	string	Optional. Valuation date label.
navLabel	string	Optional. Default: `"NAV"`. Label above the headline figure.
navValue	string	Required. Headline NAV or AUM (include currency).
navDelta	string	Optional. Optional change pill, e.g. "+1.8% MTD".
navDeltaTone	"up" \| "down" \| "flat"	Optional. Default: `up`. Colours the delta pill.Values: up, down, flat
metrics	{ label: string; value: string; tone?: "up" \| "down" \| "flat" }[]	Optional. Supporting metrics in a responsive grid (typically 3–4 items).

Examples

<PortfolioSummaryCard
  title="Balanced growth portfolio"
  asOf="31 May 2026"
  navValue="£24.6m"
  navDelta="+1.8% MTD"
  navDeltaTone="up"
  metrics={[
    { label: "YTD return", value: "+4.2%", tone: "up" },
    { label: "Volatility (1y)", value: "9.1%" },
    { label: "Tracking error", value: "42 bps" },
    { label: "Cash", value: "8.2%" }
  ]}
/>

<PillarScoreCard>

seoStatsChartDashboard

Lighthouse-style score gauge: an overall 0–100 ring (green ≥ 80, amber ≥ 50, red below) plus horizontal sub-score bars per pillar. Domain-neutral — use for SEO, GEO/AEO, maturity, or any multi-pillar assessment.

When to use: Use once at the top of an executive summary as the headline verdict. Works for SEO analysis (Technical, Content, Authority), combined SEO/GEO/AEO scores, organisational maturity, or any scored assessment with 2–5 pillars. Scores must come from a real audit or documented method; never invent them. `<SeoScoreCard>` is a deprecated alias with the same props.

Often with: SeoAuditChecklistCoreWebVitalsCardKPIGridMaturityRadar

Preview

Combined visibility score

Weighted score from the 7 Jul 2026 site crawl and AI citation audit

Assessed 7 Jul 2026

73/ 100

SEO / GEO / AEO

SEO80
Strong technical base; one broken footer link
GEO80
AEO60
Schema present but thin entity coverage

SEO health score

Weighted score across four pillars, from the June 2026 crawl of 1,240 pages

Crawled 14 Jun 2026

62/ 100

Overall score

Technical48
Crawl budget wasted on 3,100 parameter URLs
Content71
Authority66
Experience58
INP fails on mobile product pages

Prop	Type	Notes
score	number	Required. Overall score 0–100 (clamped).Example: `62`
scoreLabel	string	Optional. Default: `"Overall score"`. Label beside the pillar bars.Example: `Combined SEO / GEO / AEO`
title	string	Optional. Card heading.Example: `Site visibility score`
description	string	Optional. Muted subheading, e.g. the scoring method.
asOf	string	Optional. Assessment date label shown top-right.Example: `Crawled 14 Jun 2026`
pillars	{ label: string; score: number; note?: string }[]	Optional. Category sub-scores (0–100), typically 2–5 pillars (e.g. SEO, GEO, AEO or Technical, Content, Authority).

Examples

<PillarScoreCard
    title="Combined visibility score"
    scoreLabel="SEO / GEO / AEO"
    description="Weighted score from the 7 Jul 2026 site crawl and AI citation audit"
    asOf="Assessed 7 Jul 2026"
    score={73}
    pillars={[
        { label: "SEO", score: 80, note: "Strong technical base; one broken footer link" },
        { label: "GEO", score: 80 },
        { label: "AEO", score: 60, note: "Schema present but thin entity coverage" }
    ]}
/>

<PillarScoreCard
    title="SEO health score"
    description="Weighted score across four pillars, from the June 2026 crawl of 1,240 pages"
    asOf="Crawled 14 Jun 2026"
    score={62}
    pillars={[
        { label: "Technical", score: 48, note: "Crawl budget wasted on 3,100 parameter URLs" },
        { label: "Content", score: 71 },
        { label: "Authority", score: 66 },
        { label: "Experience", score: 58, note: "INP fails on mobile product pages" }
    ]}
/>

<SerpPositionDistribution>

seoChartStatsDashboard

Bar chart of keyword counts per SERP position bucket (e.g. Top 3, 4–10, 11–20, 21–50, 51–100), with an optional muted comparison series for the previous crawl.

When to use: Use to show the shape of the ranking profile and how it shifted, typically right after the headline KPIs in an SEO report. Buckets are free-form labels, so it also works for striking-distance analyses (positions 11–20).

Often with: KeywordRankingTableTrafficTrendChartKPIGrid

Preview

Keyword distribution by SERP position

Tracked keyword set, June vs March 2026

Mar 2026 Jun 2026

Prop	Type	Notes
title	string	Optional. Chart heading.Example: `Keyword distribution by SERP position`
description	string	Optional. Muted subheading.
buckets	{ label: string; count: number; previousCount?: number }[]	Required. Buckets in display order. previousCount adds a grey comparison bar.
currentLabel	string	Optional. Default: `"Current"`. Legend label for the current series.
previousLabel	string	Optional. Default: `"Previous"`. Legend label for the comparison series.

Examples

<SerpPositionDistribution
    title="Keyword distribution by SERP position"
    description="Tracked keyword set, June vs March 2026"
    currentLabel="Jun 2026"
    previousLabel="Mar 2026"
    buckets={[
        { label: "Top 3", count: 12, previousCount: 8 },
        { label: "4–10", count: 34, previousCount: 29 },
        { label: "11–20", count: 58, previousCount: 61 },
        { label: "21–50", count: 71, previousCount: 78 },
        { label: "51–100", count: 44, previousCount: 52 }
    ]}
/>

<CoreWebVitalsCard>

seoStatsDataDashboard

Core Web Vitals tiles (LCP, INP, CLS or any measured metrics) with good / needs-improvement / poor rating chips, threshold hints, and a source footer.

When to use: Use in the technical section of an SEO report to report field or lab performance data. State the device class and data source in `sourceNote` (e.g. mobile CrUX field data). Ratings must reflect the tool's thresholds; do not restate lab data as field data.

Often with: SeoAuditChecklistPillarScoreCard

Preview

Core Web Vitals — mobile

LCPNeeds improvement

Largest Contentful Paint

3.4 s

Good ≤ 2.5 s

INPPoor

Interaction to Next Paint

420 ms

Good ≤ 200 ms

CLSGood

Cumulative Layout Shift

0.06

Good ≤ 0.1

Mobile, CrUX field data, 28 days to 14 Jun 2026

Prop	Type	Notes
title	string	Optional. Card heading.Example: `Core Web Vitals — mobile`
description	string	Optional. Muted subheading.
metrics	{ id: string; name?: string; value: string; rating: "good" \| "needs-improvement" \| "poor"; threshold?: string }[]	Required. Typically the three vitals; the grid adapts to 2 or 3 columns.
sourceNote	string	Optional. Footer line naming device class, data source, and window.Example: `Mobile, CrUX field data, 28 days to 14 Jun 2026`

Examples

<CoreWebVitalsCard
    title="Core Web Vitals — mobile"
    sourceNote="Mobile, CrUX field data, 28 days to 14 Jun 2026"
    metrics={[
        { id: "LCP", name: "Largest Contentful Paint", value: "3.4 s", rating: "needs-improvement", threshold: "Good ≤ 2.5 s" },
        { id: "INP", name: "Interaction to Next Paint", value: "420 ms", rating: "poor", threshold: "Good ≤ 200 ms" },
        { id: "CLS", name: "Cumulative Layout Shift", value: "0.06", rating: "good", threshold: "Good ≤ 0.1" }
    ]}
/>

<BacklinkSnapshotCard>

seoStatsDataDashboard

Backlink profile snapshot: a strip of headline metrics (referring domains, backlinks, authority, toxic share) with optional deltas, plus a list of notable referring domains with authority pills and link counts.

When to use: Use in the authority section of an SEO report. Keep `topDomains` to the 5–8 most notable wins or risks; the full export belongs in an appendix `<DataTable>`. Name the tool and date in `sourceNote` since authority scales differ per vendor.

Often with: KPIGridDataTableTrafficTrendChart

Preview

Backlink profile

Referring domains

412

+18 in 90 days

Backlinks

6,840

Domain rating

Toxic share

2.1%

−0.4 pts

techcrunch.com
Product launch coverage, Feb 2026
DR 931 link
computerwoche.de
Automation market round-up
DR 783 links

Source: Ahrefs, 14 Jun 2026

Prop	Type	Notes
title	string	Optional. Card heading.Example: `Backlink profile`
description	string	Optional. Muted subheading.
metrics	{ label: string; value: string; delta?: string }[]	Optional. 3–4 headline metrics. delta with leading + renders green, leading − renders red.
topDomains	{ domain: string; authority?: string; links?: string; note?: string }[]	Optional. Notable referring domains. authority is pre-formatted (e.g. "DR 91").
sourceNote	string	Optional. Footer naming the tool and date.Example: `Source: Ahrefs, 14 Jun 2026`

Examples

<BacklinkSnapshotCard
    title="Backlink profile"
    sourceNote="Source: Ahrefs, 14 Jun 2026"
    metrics={[
        { label: "Referring domains", value: "412", delta: "+18 in 90 days" },
        { label: "Backlinks", value: "6,840" },
        { label: "Domain rating", value: "54" },
        { label: "Toxic share", value: "2.1%", delta: "−0.4 pts" }
    ]}
    topDomains={[
        { domain: "techcrunch.com", authority: "DR 93", links: "1 link", note: "Product launch coverage, Feb 2026" },
        { domain: "computerwoche.de", authority: "DR 78", links: "3 links", note: "Automation market round-up" }
    ]}
/>