Component library

Showing 3 components in the seo kit with role chart.

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

Mar 2026 Jun 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 }
    ]}
/>

<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

Impressions ClicksSource: Google Search Console, 12 months to Jun 2026

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