Add MetricCard and MetricCardGroup components

[pedromenezes1]

Adds two new components for displaying metric data with optional trend indicators, sparklines, and semantic color variants.

• MetricCard: Displays a single metric value with optional trend indicator, sparkline, loading/error states, and tooltip. Supports clickable cards via href or onClick.
• MetricCardGroup: Layout container that wraps MetricCards in a LayerCard with optional title header and horizontal/vertical orientation.

MetricCard Props

Prop	Type	Default	Description
label	string	—	Label text displayed above the value
value	ReactNode	—	Metric value (string, number, or JSX like Badge). Optional when loading or error is true
unit	string	—	Unit displayed after the value, e.g. "%", "ms"
trend	MetricCardTrend	—	Trend indicator with direction arrow and label
sparkline	MetricCardSparkline	—	Sparkline chart at the bottom of the card
href	string	—	Renders the card as a link (uses LinkProvider for router integration)
onClick	MouseEventHandler	—	Click handler; renders as a button when no href
loading	boolean	false	Shows skeleton loading state
error	boolean	false	Shows em-dash placeholder
tooltip	ReactNode	—	Tooltip content next to the label
tooltipIcon	ComponentType	—	Custom icon for the tooltip trigger

MetricCardTrend

Prop	Type	Description
direction	"up" | "down" | "neutral"	Arrow direction
label	string	Pre-formatted label, e.g. "13.8%", "2.3pp"
lessIsBetter	boolean	Inverts color: down = green, up = red
isNeutral	boolean	Forces neutral/gray coloring

MetricCardSparkline

Prop	Type	Description
data	number[]	Data points for the sparkline
theme	"success" | "danger" | "neutral"	Semantic color theme
color	string	Custom color override
yMin	number	Override auto-scaled minimum
yMax	number	Override auto-scaled maximum

MetricCardGroup Props

Prop	Type	Default	Description
title	ReactNode	—	Optional header text
orientation	"horizontal" | "vertical"	"horizontal"	Layout direction
children	ReactNode	—	MetricCard children

---

• Reviews
• bonk has reviewed the change
• automated review not possible because: new component needs visual/design review
• Tests
• Tests included/updated

[pkg-pr-new]

npm i https://pkg.pr.new/@cloudflare/kumo@464

commit: 7cc20d3

[github-actions]

Docs Preview

View docs preview

Commit: bcc647f

[github-actions]

Visual Regression Report — 11 changed, 27 unchanged

11 screenshot(s) with visual changes:

Button / Loading State

3 px (0%) changed

Before	After	Diff

Dialog / Dialog With Actions

200 px (0.2%) changed

Before	After	Diff

Select / Select Basic

299 px (0.29%) changed

Before	After	Diff

Select / Select Without Label

105 px (0.1%) changed

Before	After	Diff

Select / Select With Field

635 px (0.54%) changed

Before	After	Diff

Select / Select Loading

0 px (0%) changed

Before	After	Diff

Select / Select Multiple

851 px (0.84%) changed

Before	After	Diff

Select / Select Grouped

194 px (0.19%) changed

Before	After	Diff

Select / Select Grouped With Disabled

673 px (0.66%) changed

Before	After	Diff

Select / Select Long List

1,572 px (1.33%) changed

Before	After	Diff

Select (Open)

1,265 px (0.01%) changed

Before	After	Diff

27 screenshot(s) unchanged

• Button / Basic
• Button / Variant: Primary
• Button / Variant: Secondary
• Button / Variant: Ghost
• Button / Variant: Destructive
• Button / Variant: Outline
• Button / Variant: Secondary Destructive
• Button / Sizes
• Button / With Icon
• Button / Icon Only
• Button / Disabled State
• Button / Title
• Button / Link as Button
• Dialog / Dialog Basic
• Dialog / Dialog Alert
• Dialog / Dialog Confirmation
• Dialog / Dialog With Select
• Dialog / Dialog With Combobox
• Dialog / Dialog With Dropdown
• Dialog (Open)
• Select / Select Sizes
• Select / Select Placeholder
• Select / Select With Tooltip
• Select / Select Custom Rendering
• Select / Select Complex
• Select / Select Disabled Options
• Select / Select Disabled Items

---

Generated by Kumo Visual Regression

[pedromenezes1]

/bonk

[ask-bonk]

Summary of PR #464

Title: Add MetricCard and MetricCardGroup components
Author: @pedromenezes1
Status: Open, awaiting design review

What This PR Adds

Two new components for displaying metric data:

1. MetricCard — Displays a single metric with optional trend indicator, sparkline chart, loading/error states, and tooltip. Supports clickable interactions via href or onClick.

2. MetricCardGroup — Layout container that wraps MetricCards in a LayerCard with optional title header and configurable horizontal/vertical orientation.

Key Changes

Category	Details
New Components	metric-card and metric-card-group with full TypeScript implementation
Tests	331 lines of test coverage across both components
Documentation	New docs page, demo component, and sidebar navigation
Changeset	Added for versioning
Exports	Updated package index and vite config

Automated Feedback

• 📦 Preview Package: Available via npm i https://pkg.pr.new/@cloudflare/kumo@464
• 📖 Docs Preview: https://1afea733-kumo-docs.design-engineering.workers.dev
• 🖼️ Visual Regression: 29 screenshots show minor pixel changes (Button, Dialog, Select components). The new MetricCard components are being tested but visual diffs for them aren't listed in the report.

Review Checklist Status

• ✅ Tests included/updated
• ⏳ Awaiting design/visual review (automated review skipped)
• ⏳ Pending approval from @bonk

Next Steps: Design team review for visual compliance before merge.

github run