Metric card
A compact summary for a number that needs context.
npm install https://animui.stracture.net/__local/package.tgzLive · keyboard ready
- A single plain number with odometer style rolling digits, such as uptime or orders.
- Numbers that update live and should roll in the direction they moved.
- Use stat-card for preformatted strings, trend arrows, tones, and icons.
- Use sparkline when the trend over time matters more than the latest value.
- Use animated-counter for a number without a card around it.
Installation
Install animui once, then import any component or block from its typed package entry.
animui · 250 components and blocks
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { MetricCard } from 'animui/metric-card';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideexample.tsx
import { MetricCard } from "animui/metric-card"; export function Uptime() { return <MetricCard label="Uptime" value={99.9} suffix="%" context="Last 30 days" change="+0.2%" />;}MetricCard
A compact card with a label, an odometer style number, context line, and optional change chip.
PropTypeDefaultDescription
labelRequiredstring–What is measured.valueRequirednumber–The number. Rolls up from zero on first view, then between values.suffixstring–Text after the number, such as "%" or " ms".contextRequiredstring–Line under the number, such as "vs last week".changestring–Chip in the top corner, such as "+12%". Omit to hide it.- Renders an article; the number is read as plain text through a visually hidden copy.
- The change chip is plain text, so write the direction into it (+ or -) rather than relying on color.
- It does not announce updates; wrap it in a live region if values change while people watch.
- The value uses animated-counter: digits roll on view and turn the way the number moved.
- Label, context, and change copy roll in from the direction the number moved, and the chip width springs.
- Reduced motion jumps the digits and swaps copy with a quick fade.
- Below 380px the padding tightens and the change chip wraps under the label instead of crowding it.
- Copy lines stay on one line and clip, so keep label and context short.
- Digits roll with animated-counter and a ResizeObserver drives the chip width spring; a dashboard row of cards is fine.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use when the value is a plain number and you want the rolling digits. Use stat-card for preformatted strings, trend arrows, tones, and icons.
- value must be a number; put units in suffix and formatting-free context in context.
The full library index for assistants is at /llms.txt.