Component library

Dashboard

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

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

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

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

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

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

  54

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

• <TrafficTrendChart>

  seoChartDashboard

  Multi-series area chart over time for traffic-style metrics: organic sessions, clicks, impressions, or conversions, with automatic k/M axis formatting and a legend built from series names.

  When to use: Use to show organic performance over the last 6–12 periods, e.g. GSC clicks and impressions or GA4 sessions. Keep to 1–3 series so the story stays readable; name the data source and window in `sourceNote`. For financial revenue snapshots prefer `<FinanceOverviewCard>`.

  Often with: SerpPositionDistributionKPIGridFinanceOverviewCard

  Preview

  Organic clicks and impressions, 12 months

  Prop	Type	Notes
  title	string	Optional. Chart heading.Example: Organic clicks and impressions, 12 months
  description	string	Optional. Muted subheading.
  labels	string[]	Required. X-axis labels in order (months, weeks).Example: ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
  series	{ name: string; values: number[]; color?: "brand" | "sky" | "emerald" | "purple" | "slate" }[]	Required. Each values array must match labels length. Colours default to the palette order when omitted.
  unit	string	Optional. Default: "". Suffix appended to axis ticks and tooltip values.
  sourceNote	string	Optional. Caption under the legend.Example: Source: Google Search Console, 12 months to Jun 2026

  Examples

  <TrafficTrendChart
      title="Organic clicks and impressions, 12 months"
      sourceNote="Source: Google Search Console, 12 months to Jun 2026"
      labels={["Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "Jun"]}
      series={[
          { name: "Impressions", values: [82000, 85000, 91000, 96000, 90000, 84000, 98000, 104000, 112000, 118000, 121000, 127000], color: "sky" },
          { name: "Clicks", values: [2400, 2600, 2900, 3100, 2800, 2500, 3200, 3500, 3900, 4200, 4400, 4700], color: "brand" }
      ]}
  />