Component library

Showing 4 components in the seo kit with role data.

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

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