Component library

Dashboard

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

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