KPI value with trend delta.
import { Metric } from "@cooud-ui/ui";
npx cooud-ui add metric
Generated from the component's exported types.
Extends HTMLAttributes<HTMLSpanElement>
| Prop | Type | Default | Description |
|---|---|---|---|
trend | "up" | "down" | "neutral" | "neutral" | — |
On this page
Compact KPI tiles pairing a label, a value, and a trend-aware delta.
<div className="grid gap-4 sm:grid-cols-3"><Metric><MetricLabel>Revenue</MetricLabel><MetricValue>$48,290</MetricValue><MetricDelta trend="up">+12.5%</MetricDelta></Metric><Metric><MetricLabel>Churn</MetricLabel><MetricValue>2.1%</MetricValue><MetricDelta trend="down">-0.4%</MetricDelta></Metric><Metric><MetricLabel>Sessions</MetricLabel><MetricValue>9,830</MetricValue><MetricDelta trend="neutral">0.0%</MetricDelta></Metric></div>