Compact 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.
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.