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	Description
label	string	Label text above the value
value	string	Pre-formatted metric value
unit	string	Unit suffix (e.g., "%", "ms", "k")
variant	'default' | 'success' | 'danger' | 'warning'	Value text color
trend	{ direction, label, isPositive }	Trend indicator with arrow icon
sparkline	{ data[], theme?, color?, yMin?, yMax? }	SVG sparkline chart
href	string	Renders as a link
onClick	MouseEventHandler	Renders as a button
loading	boolean	Skeleton loading state
error	boolean	Error placeholder state
tooltip	ReactNode	Info tooltip next to label

MetricCardGroup Props

Prop	Type	Description
orientation	'horizontal' | 'vertical'	Layout direction (default: horizontal)
title	ReactNode	Optional header in LayerCard.Secondary

---

• 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: cfe44d7

[github-actions]

Docs Preview

View docs preview

Commit: 585baa4

[github-actions]

Visual Regression Report — 4 changed, 34 unchanged

4 screenshot(s) with visual changes:

Button / Loading State

5 px (0%) changed

Before	After	Diff

Dialog (Open)

0 px (0%) changed

Before	After	Diff

Select / Select Loading

0 px (0%) changed

Before	After	Diff

Select (Open)

0 px (0%) changed

Before	After	Diff

34 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 With Actions
• Dialog / Dialog Basic
• Dialog / Dialog Alert
• Dialog / Dialog Confirmation
• Dialog / Dialog With Select
• Dialog / Dialog With Combobox
• Dialog / Dialog With Dropdown
• Select / Select Basic
• Select / Select Sizes
• Select / Select Without Label
• Select / Select With Field
• Select / Select Placeholder
• Select / Select With Tooltip
• Select / Select Custom Rendering
• Select / Select Multiple
• Select / Select Complex
• Select / Select Disabled Options
• Select / Select Disabled Items
• Select / Select Grouped
• 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