Data displayFree component
Metric card
A compact trend chart with labeled values, point selection, and a readable summary for screen readers. Show a metric and how it changes over time.
Preview
Open previewInstallation
Add metric card to your project, then make it your own.
shadcnRun in your terminal
npx shadcn add https://menaceui.com/r/menace-metric-card.jsonUsage
TSXUsage example
import { MetricCard } from "@/components/menace-metric-card";
export default function Component() {
return <MetricCard label="Weekly installs" value="2,842" series={series} />;
}Props
Key options and their defaults.
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.