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: c2e6bd4

[github-actions]

Docs Preview

View docs preview

Commit: 8d8f1cd

[github-actions]

Visual Regression Report — 17 changed, 23 unchanged

17 screenshot(s) with visual changes:

Button / Basic

90 px (0.09%) changed

Before	After	Diff

Button / Variant: Outline

82 px (0.08%) changed

Before	After	Diff

Button / Loading State

0 px (0%) changed

Before	After	Diff

Dialog / Dialog With Actions

200 px (0.2%) changed

Before	After	Diff

Dialog / Dialog Basic

192 px (0.19%) changed

Before	After	Diff

Dialog / Dialog Alert

862 px (0.85%) changed

Before	After	Diff

Dialog / Custom Max Width

615 px (0.61%) changed

Before	After	Diff

Dialog / Dialog With Dropdown

130 px (0.13%) changed

Before	After	Diff

Select / Select Basic

486 px (0.48%) changed

Before	After	Diff

Select / Select Sizes

947 px (0.51%) changed

Before	After	Diff

Select / Select With Description

889 px (0.75%) changed

Before	After	Diff

Select / Select With Error

1,927 px (1.63%) changed

Before	After	Diff

Select / Select Custom Rendering

414 px (0.41%) changed

Before	After	Diff

Select / Select Loading

2,225 px (1.11%) changed

Before	After	Diff

Select / Select Disabled Options

829 px (0.82%) changed

Before	After	Diff

Select / Select Grouped

194 px (0.19%) changed

Before	After	Diff

Select (Open)

0 px (0%) changed

Before	After	Diff

23 screenshot(s) unchanged

• Button / Variant: Primary
• Button / Variant: Secondary
• Button / Variant: Ghost
• Button / Variant: Destructive
• Button / Variant: Secondary Destructive
• Button / Sizes
• Button / With Icon
• Button / Icon Only
• Button / Disabled State
• Button / Title
• Button / Link as Button
• Dialog / Dialog Confirmation
• Dialog / Dialog With Select
• Dialog / Dialog With Combobox
• Dialog (Open)
• Select / Select Without Label
• Select / Select Placeholder
• Select / Select With Tooltip
• Select / Select Multiple
• Select / Select Complex
• Select / Select Disabled Items
• Select / Select Grouped With Disabled
• Select / Select Long List

---

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

[stritt]

thanks for putting this together! we're cleaning up the pr backlog and this would need a rebase plus a fresh api and design review against current main. are you still planning to work on it? if not we'll close it for now on july 28, but you're always welcome to reopen it when ready.