Available nowReact

Metric card

An animated trend card with direct labels and a screen-reader summary.

shadcnRegistry install command

npx shadcn add http://localhost:3000/r/menace-metric-card.json

Preview

Live component behavior

Interactive

Preview size

desktop

2,842+14.2%vs. last week

Install activity across the last seven days.

Weekly installs over 7 periods

Today2,842

Use it in context.

Copy the component into your project, then adapt the source to the interface around it.

TSXUsage example

import { MetricCard } from "@/components/menace-metric-card";

export default function Component() {
  return <MetricCard label="Weekly installs" value="2,842" series={series} />;
}

API and behavior

seriesrequired: Ordered label and numeric value pairs.
trendundefined: Trend value, label, and up, down, or neutral direction.
valueFormattertoLocaleString: Formats values in accessible labels and the active detail.
onPointSelectundefined: Receives the selected point and index.

Every bar is focusable and exposes its label and formatted value.
Hover, focus, and click all update the active data point.
Empty series render an intentional empty state instead of invalid chart geometry.