Lighthouse Score
Category rings with the metrics behind them. A performance score of 62 is not actionable; "LCP 4.1s" is — so the metrics are shown, not hidden behind the summary.
src/components/ui/lighthouse-score.tsxAbout
From the component's own source, where it was written.
Category scores as rings, with the metrics behind them.
Scores are banded at 50 and 90, matching the tool everyone compares against. Inventing our own bands would make a "green" here mean something different from a "green" in the report the number came from, which is worse than useless.
Metric values are shown in their own units next to the score. A performance score of 62 is not actionable; "LCP 4.1s" is. The score is a summary of the metrics, so hiding them behind the summary removes the only part you can act on.
The ring is drawn with stroke-dasharray on a circle rather than a conic gradient, so it prints, scales, and respects the theme's own colours.
Install
npx astralyx-ui add lighthouse-score
Usage
import { LighthouseScore } from '@/components/ui/lighthouse-score'
<LighthouseScore categories={categories} />Composer
Change the props and the source below follows.
PerformanceNeeds work
- LCP
- 4.1s
- CLS
- 0.04
- TBT
- 410ms
- FCP
- 1.2s
AccessibilityGood
- Contrast
- pass
- Names
- pass
Best practicesGood
SEOGood
<LighthouseScore categories={categories} />Examples
A passing audit
<LighthouseScore categories={categories} />A failing one
<LighthouseScore categories={categories} ringSize={64} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
LighthouseScore
Category scores as rings, with the metrics behind them.
Extends Omit<ComponentProps<'div'>, 'children'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| categories | LighthouseCategory[] | required | { id, label, score, metrics? } with score 0–100. |
| ringSize | number | 56 | — |
Functions
| Function | Signature | Description |
|---|---|---|
| lighthouseBand | (score: number) => { color: string; ink: string; label: string; } | Thresholds match the reference tool — diverging would make colours lie. |
Types
LighthouseCategory
| Field | Type | Description |
|---|---|---|
| id | string | — |
| label | ReactNode | — |
| score | number | 0–100. |
| metrics? | { label: ReactNode; value: ReactNode; poor?: boolean }[] | The score summarises them; only the metrics can be acted on. poor: true tints one. |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| bands | 50 / 90 | Matching the reference tool. Inventing our own would make a green here mean something different from a green in the report the number came from. |
| ring | SVG stroke-dasharray | Not a conic gradient — it prints, scales, and takes the theme's own colours. |