Stats Card

Metric cards. Free, MIT · Data and metrics › Metrics and widgets

Installation

npx valyro-cli@latest add stats-card

npx shadcn@latest add https://valyro.xyz/r/stats-card.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { StatsCard } from 'valyro-ui';

Prop	Type	Default
`label` *	`ReactNode`		Metric name in the card header, e.g. "Revenue".
`value` *	`ReactNode`		A number (formatted with `locale` and `format`) or pre-formatted content such as "$12,480".
`format`	`Intl.NumberFormatOptions`		Number formatting for a numeric `value`, e.g. `{ notation: 'compact' }` or a currency.
`delta`	`number`		Change in percent (12.5 → "12.5%"). The sign sets the arrow and color.
`invertTrend`	`boolean`	`false`	Treat a decrease as good news (error rate, latency, churn).
`icon`	`ReactNode`		Decorative icon at the end of the header, opposite the label (hidden from screen readers).
`caption`	`ReactNode`		Context next to the delta, e.g. "vs last week".
`sparkline`	`number[]`		Series for a small trend line. Needs at least two finite points.
`loading`	`boolean`	`false`	Skeleton lines replace the value, delta and sparkline; the label stays. Sets `aria-busy`.
`locale`	`string`		Number and percent formatting. Defaults to the `ThemeProvider` locale, then the browser's.
`labels`	`Partial<StatsCardLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

KPI Group — KPI row: value, change vs. previous period, sparkline and progress to goal
Widget — Dashboard container: title, actions, big number, legend and chart area
Number Value — Locale-aware number: currency, percent, compact notation and units
Trend Value — Metric change: arrow, sign and color, as text or a pill
Proportion Bar — Proportion bar with a legend: storage, budget, breakdown
Activity Rings — Concentric progress rings toward goals
Leaderboard — Leaderboard: medal places, thumbnails, numbers and change over a period
Data Table — Tables with search and sorting
Data Grid — Grid for 100,000 rows: grouping, filters, inline editing
Virtual List — Virtual list for 100,000 rows
Bulk Action Bar — Actions for selected rows, with keyboard shortcuts
List Block — List with images or icons, descriptions and values