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

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

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