Component library

Showing 10 components with role data.

Dashboard

<MaturityHeatmap>

sharedChartContentDataDashboard

Stage-based maturity table (rows = dimensions, columns = levels). One highlighted cell per row.

When to use: Use as an alternative to MaturityRadar when the maturity framework is stage-based (e.g. CMMI-style: ad hoc / repeatable / defined / managed / optimised).

Preview

Current vs 6-month target

Dimension	Ad hoc	Repeatable	Defined	Managed	Optimised
Data quality			●	○
Tooling		●		○

Current Target

Prop	Type	Notes
rows	string[]	Required. Row labels (dimensions).Example: `["Data quality", "Tooling", "Process clarity"]`
columns	string[]	Required. Column labels (maturity levels).Example: `["Ad hoc", "Repeatable", "Defined", "Managed", "Optimised"]`
current	boolean[][]	Required. 2D array [row][col]. Each row should have at most one true cell.
target	boolean[][]	Optional. Optional target cells, drawn as a ring.
title	string	Optional. Chart title.

Examples

<MaturityHeatmap
    rows={["Data quality", "Tooling"]}
    columns={["Ad hoc", "Repeatable", "Defined", "Managed", "Optimised"]}
    current={[[false, false, true, false, false], [false, true, false, false, false]]}
    target={[[false, false, false, true, false], [false, false, false, true, false]]}
    title="Current vs 6-month target"
/>

<DataTable>

sharedDataListDashboard

Card-style data grid with optional status tabs, sortable columns, status badges, row checkboxes (illustrative), filter affordance, and client-side pagination.

When to use: Use for tabular report appendices (delivery lists, backlog queues, milestone trackers) where readers benefit from filtering and paging without leaving the report. Keep row counts modest for print; prefer `pageSize` 5–10. In SEO reports, use it for page-level appendices (top pages by clicks, redirect maps, content inventory); for keyword rankings prefer the purpose-built <KeywordRankingTable>.

Preview

Delivery activities

Track your recent shipping activities

Select					Route		Status
	#324112	Electronics	Acme	10 Apr 2028 2:15 pm	Berlin–Milan	$1,250.00	Delivered

Showing 1 to 1 of 1

Prop	Type	Notes
title	string	Required. Table card title.Example: `Delivery activities`
description	string	Optional. Subtitle under the title.Example: `Track your recent shipping activities`
columns	{ key: string; label: string; sortable?: boolean }[]	Required. Column definitions; `key` matches keys on each row object.
rows	Record<string, string>[]	Required. Row data; values are strings so they serialise cleanly inside MDX.
tabs	{ id: string; label: string }[]	Optional. Optional filter tabs. Include `{ id: "all", label: "All" }` first for an unfiltered view. Other `id` values slug-match `tabFilterKey` on each row (e.g. status "In Transit" matches tab `in-transit`).
tabFilterKey	string	Optional. Default: `status`. Row field used when filtering by tab.
badgeColumnKey	string	Optional. Default: `status`. Column whose cells render as coloured status pills.
showCheckboxes	boolean	Optional. Default: `true`. Show a leading illustrative checkbox column.
showFilterButton	boolean	Optional. Default: `true`. Show a secondary Filter button (illustrative; no sheet wired).
filterButtonLabel	string	Optional. Default: `"Filter"`. Label for the filter button.
pageSize	number	Optional. Default: `5`. Rows per page; set `0` to disable pagination footer.

Examples

<DataTable
    title="Delivery activities"
    description="Track your recent shipping activities"
    tabs={[
        { id: "all", label: "All" },
        { id: "delivered", label: "Delivered" },
        { id: "in-transit", label: "In transit" },
        { id: "pending", label: "Pending" },
        { id: "processing", label: "Processing" }
    ]}
    columns={[
        { key: "orderId", label: "Order ID", sortable: true },
        { key: "category", label: "Category", sortable: true },
        { key: "company", label: "Company", sortable: true },
        { key: "arrival", label: "Arrival", sortable: true },
        { key: "route", label: "Route", sortable: false },
        { key: "price", label: "Price", sortable: true },
        { key: "status", label: "Status", sortable: false }
    ]}
    rows={[{ orderId: "#324112", category: "Electronics", company: "Acme", arrival: "10 Apr 2028 2:15 pm", route: "Berlin–Milan", price: "$1,250.00", status: "Delivered" }]}
/>

<SimpleDataTable>

sharedDataDashboard

Read-only text grid: a header row from string labels and body rows from string arrays. Bordered card, optional caption, optional zebra striping, optional bold emphasis on chosen body rows (totals, subtotals). No sorting, filters, or pagination.

When to use: Use when you only need to present a small matrix (assumption register, RACI, scorecard, inventory snapshot) without the interactive chrome of `<DataTable>`. Prefer markdown tables for narrative prose; use this when MDX expressions make row data easier to maintain.

Often with: DataTable

Preview

Session attendance (illustrative)

Name	Team	Day 1	Day 2
Alex Example	Operations	Yes	Yes
Jordan Example	IT	Yes	No

Hours by workstream (illustrative)

Workstream	Manual hrs / week
Invoice intake	42
Order acknowledgements	28
Total	70

Prop	Type	Notes
columns	string[]	Required. Header labels in column order.Example: `["Role", "Name", "Availability"]`
rows	string[][]	Required. Each entry is one row: an array of cell strings aligned to `columns`.Example: `[["Sponsor", "Alex Example", "Weekly"], ["Owner", "Jordan Example", "Daily"]]`
caption	string	Optional. Optional title or context line above the table.
striped	boolean	Optional. Default: `true`. Whether odd body rows use a subtle banded background.
boldRowIndices	number[]	Optional. 0-based indices of body rows to render with semibold text (e.g. `[0, 2]`). Indices outside the row range are ignored.Example: `[1]`
boldLastRow	boolean	Optional. Default: `false`. When true, semibold the last body row (typical for a totals or summary line). Combines with `boldRowIndices`.

Examples

<SimpleDataTable
    caption="Session attendance (illustrative)"
    columns={["Name", "Team", "Day 1", "Day 2"]}
    rows={[
        ["Alex Example", "Operations", "Yes", "Yes"],
        ["Jordan Example", "IT", "Yes", "No"]
    ]}
/>

<SimpleDataTable
    caption="Hours by workstream (illustrative)"
    columns={["Workstream", "Manual hrs / week"]}
    rows={[
        ["Invoice intake", "42"],
        ["Order acknowledgements", "28"],
        ["Total", "70"]
    ]}
    boldLastRow
/>

<AllocationDriftChart>

financeChartDataDashboard

Current vs target allocation table with drift, tolerance band status (in band / overweight / underweight), and inline weight bars.

When to use: Use in portfolio monitoring or rebalancing reports to show how each sleeve drifts from strategic targets. Pass weights as numbers (typically percent). Set `tolerance` per row when bands differ by asset class.

Often with: ComparisonBarUsageDonutCardSimpleDataTable

Preview

Strategic allocation drift

Tolerance band ±1% unless noted

Asset class	Current	Target	Drift	Status
Global equities	42.3%	40.0%	+2.3%	Overweight
Investment grade credit	24.1%	25.0%	-0.9%	In band
Private markets	18.6%	20.0%	-1.4%	In band
Cash	8.2%	10.0%	-1.8%	Underweight
Alternatives	6.8%	5.0%	+1.8%	Overweight

Current weight Target weight

Prop	Type	Notes
title	string	Optional. Chart heading.
description	string	Optional. Muted subheading.
rows	{ label: string; current: number; target: number; tolerance?: number }[]	Required. One row per asset class or sleeve. `tolerance` defaults to 1 (same unit as weights).
unit	string	Optional. Default: `"%"`. Suffix for weight and drift columns.

Examples

<AllocationDriftChart
  title="Strategic allocation drift"
  description="Tolerance band ±1% unless noted"
  rows={[
    { label: "Global equities", current: 42.3, target: 40, tolerance: 1 },
    { label: "Investment grade credit", current: 24.1, target: 25, tolerance: 1 },
    { label: "Private markets", current: 18.6, target: 20, tolerance: 2 },
    { label: "Cash", current: 8.2, target: 10, tolerance: 1 },
    { label: "Alternatives", current: 6.8, target: 5, tolerance: 1 }
  ]}
/>

<RebalanceTradeList>

financeDataListDashboard

Ordered list of proposed rebalance trades with buy/sell/hold chips, formatted amounts, optional weight before/after, and optional turnover footer.

When to use: Use after an allocation drift review to show the concrete trades required to return to target. Keep amounts pre-formatted strings (currency or % of NAV).

Often with: AllocationDriftChartSimpleDataTableDataTable

Preview

Proposed rebalance trades

To restore policy weights as of 31 May 2026

Sell
MSCI World ETF
Trim overweight global equity sleeve
£420,000
22.1% → 20.0%
Buy
Sterling IG credit fund
£280,000
23.4% → 25.0%
Hold
Private equity co-invest
Within tolerance; no trade required
—

Estimated turnover3.2% of NAV

Prop	Type	Notes
title	string	Optional. Section heading.
description	string	Optional. Muted subheading.
trades	{ asset: string; action: "buy" \| "sell" \| "hold"; amount: string; weightBefore?: string; weightAfter?: string; note?: string }[]	Required. Proposed trades in execution order.
turnoverLabel	string	Optional. Footer label, e.g. "Estimated turnover".
turnoverValue	string	Optional. Footer value; shown only when both turnover props are set.

Examples

<RebalanceTradeList
  title="Proposed rebalance trades"
  description="To restore policy weights as of 31 May 2026"
  trades={[
    { asset: "MSCI World ETF", action: "sell", amount: "£420,000", weightBefore: "22.1%", weightAfter: "20.0%", note: "Trim overweight global equity sleeve" },
    { asset: "Sterling IG credit fund", action: "buy", amount: "£280,000", weightBefore: "23.4%", weightAfter: "25.0%" },
    { asset: "Private equity co-invest", action: "hold", amount: "—", note: "Within tolerance; no trade required" }
  ]}
  turnoverLabel="Estimated turnover"
  turnoverValue="3.2% of NAV"
/>

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

<KeywordRankingTable>

seoDataListDashboard

Keyword ranking table with SERP position, position change arrows (green up / red down), monthly volume, colour-coded difficulty, search-intent chips, and the ranking URL.

When to use: Use for the core keyword evidence in an SEO report: current rankings, movers since the last crawl, or a target keyword list. Keep to 8–15 rows per table for print; split by topic cluster if longer. Omit `position` (or set 0) for keywords not ranking in the top 100.

Often with: SerpPositionDistributionOpportunityMatrixDataTable

Preview

Priority keywords — current rankings

Keyword	Position	Change	Volume / mo	Difficulty	Intent	URL
workflow automation software	8	6	2,400	68	Commercial	/platform
ai agent platform	12	1	1,900	72	Commercial	/platform/agents
invoice automation	>100	–	3,600	55	Transactional	/solutions/finance

Source: Ahrefs, 14 Jun 2026, UK desktop

Prop	Type	Notes
title	string	Optional. Table heading.Example: `Priority keywords — current rankings`
description	string	Optional. Muted subheading.
rows	{ keyword: string; position?: number; previousPosition?: number; volume?: string; difficulty?: number; intent?: "informational" \| "navigational" \| "commercial" \| "transactional"; url?: string }[]	Required. One row per keyword. Change is derived from previousPosition − position (positive = improved). difficulty is 0–100.
sourceNote	string	Optional. Caption below the table.Example: `Source: Ahrefs, 14 Jun 2026, UK desktop`

Examples

<KeywordRankingTable
    title="Priority keywords — current rankings"
    sourceNote="Source: Ahrefs, 14 Jun 2026, UK desktop"
    rows={[
        { keyword: "workflow automation software", position: 8, previousPosition: 14, volume: "2,400", difficulty: 68, intent: "commercial", url: "/platform" },
        { keyword: "ai agent platform", position: 12, previousPosition: 11, volume: "1,900", difficulty: 72, intent: "commercial", url: "/platform/agents" },
        { keyword: "invoice automation", volume: "3,600", difficulty: 55, intent: "transactional", url: "/solutions/finance" }
    ]}
/>

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

<SeoAuditChecklist>

seoDataListDashboard

Technical audit checklist: one row per check with a pass / warn / fail / info status chip, affected count (pages or URLs), and a one-line remediation hint. The header summarises fail/warn/pass counts.

When to use: Use to report crawl findings (indexability, meta data, canonicals, structured data, hreflang) in the technical section of an SEO report. Group long audits into several checklists with `groupLabel` rather than one very long list. Every fail should map to a `<Recommendation>` later in the report.

Often with: CoreWebVitalsCardPillarScoreCardRecommendation

Preview

Crawl audit — indexability

Screaming Frog crawl of 1,240 HTML pages, 14 Jun 2026

1 fail1 warning1 pass

Parameter URLs consuming crawl budget
Faceted navigation generates indexable parameter combinations; add canonical + robots rules.
3,100 URLsFail
Missing meta descriptions
Concentrated in the blog archive.
34 pagesWarning
XML sitemap valid and referenced in robots.txt
Pass
Structured data on product pages
No Product schema yet; opportunity rather than defect.
0 pagesInfo

Prop	Type	Notes
title	string	Optional. Card heading.Example: `Crawl audit — indexability`
description	string	Optional. Muted subheading, e.g. crawler and scope.
groupLabel	string	Optional. Small uppercase band above the list for grouping.Example: `Indexability`
items	{ check: string; status: "pass" \| "warn" \| "fail" \| "info"; affected?: string; detail?: string }[]	Required. One row per audit check, most severe first.

Examples

<SeoAuditChecklist
    title="Crawl audit — indexability"
    description="Screaming Frog crawl of 1,240 HTML pages, 14 Jun 2026"
    items={[
        { check: "Parameter URLs consuming crawl budget", status: "fail", affected: "3,100 URLs", detail: "Faceted navigation generates indexable parameter combinations; add canonical + robots rules." },
        { check: "Missing meta descriptions", status: "warn", affected: "34 pages", detail: "Concentrated in the blog archive." },
        { check: "XML sitemap valid and referenced in robots.txt", status: "pass" },
        { check: "Structured data on product pages", status: "info", affected: "0 pages", detail: "No Product schema yet; opportunity rather than defect." }
    ]}
/>

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