Dashboard tile that surfaces a key product metric with delta, trend, and supporting copy.
MetricCard renders a single product metric with its label, value, optional delta, trend tone, and supporting description. Use it for KPI dashboards, billing summaries, and any quick-glance numeric surface. The supporting description sits below a subtle divider. When a delta is provided, it aligns to the far edge of that footer.
Pair a metric value with a delta and supporting context.
<MetricCard
delta="+12.4%"
description="Compared to last month"
label="Revenue"
trend="up"
value="$42.8K"
/>import { MetricCard } from "@froggdesign/enter-ui-react";Trend tone styles the delta only — the value stays neutral.
MetricCard renders a semantic div with the value as a strong. Pair it with a heading or section landmark when the metric is the primary content of a region, and keep label short so screen readers announce it before the value.
label, value, delta, description are all optional ReactNodes.trend: up, down, or neutral (default).icon: optional leading icon rendered in the head row.div props.Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.
Keep aggregation periods explicit, for example “Paid transactions · All time”.
The supporting description accepts React content, including an EnterUI Link
to a relevant filtered list. Use a link rather than a click handler on the card's
non-interactive root. Cards use compact spacing with a 160px desktop minimum.