Usage
import { ChangeSummary } from "@/registry/components/change-summary/change-summary";
<ChangeSummary changes={[/* … */]} />Props
| Name | Type | Default | Description |
|---|---|---|---|
| changes | MetricChange[] | label, change text, tone (good, bad, neutral) and the arrow direction | |
| title | string | "What's changed" | Heading in the gray tray |
| period | string | Small text on the right of the heading | |
| icon | ReactNode | Replaces the icon in front of the heading | |
| className | string | Extra class on the tray |
When to use
- A short recap at the top of a dashboard or a weekly report - Explaining in words what changed, next to the charts that show it
When not to use
Detailed time-series (use a chart).