Stat

Basic

A KPI metric card with animated count-up value, label, trend indicator (up/down/neutral), and an optional sparkline slot.

<Statlabel="Total Revenue"value={84200}prefix="$"trend="up"trendLabel="+12% this month"/><Statlabel="Active Users"value={4310}trend="up"trendLabel="+8% vs last week"/><Statlabel="Churn Rate"value={2.4}suffix="%"trend="down"trendLabel="-0.3% this month"/>

Installation

Install the component via the CLI in one command.

npx @work-rjkashyap/unified-ui add stat

pnpm dlx @work-rjkashyap/unified-ui add stat

npx @work-rjkashyap/unified-ui add stat

bunx @work-rjkashyap/unified-ui add stat

Or install the full package

Use this approach if you prefer to install the entire design system as a dependency instead of copying individual components.

npm install @work-rjkashyap/unified-ui

pnpm add @work-rjkashyap/unified-ui

yarn add @work-rjkashyap/unified-ui

bun add @work-rjkashyap/unified-ui

Anatomy

import { Stat } from "@work-rjkashyap/unified-ui";

Basic Usage

Pass a label and value to render a minimal stat card. Numeric values get the count-up animation automatically.

<Stat label="Total Users" value={12430} />
<Stat label="Revenue" value={84200} prefix="$" />
<Stat label="Uptime" value={99.9} suffix="%" />

Trend Indicator

Use trend to show a directional arrow icon and trendLabel for the description text. up renders green, down renders red, and neutral renders muted.

<Statlabel="Monthly Revenue"value={52400}prefix="$"trend="up"trendLabel="+18% vs last month"/><Statlabel="Avg. Session"value={3.2}suffix=" min"trend="neutral"trendLabel="No change"/><Statlabel="Error Rate"value={0.8}suffix="%"trend="down"trendLabel="-0.2% this week"/>

Prefix & Suffix

Add a prefix for currency symbols or a suffix for units. Both are rendered as part of the animated count-up value.

<Stat label="Revenue" value={9800} prefix="$" /><Stat label="Conversion" value={3.7} suffix="%" />

String Values

When value is a string, no count-up animation plays — the value is rendered as-is. This is useful for non-numeric KPIs.

<Stat label="Plan" value="Pro" /><Stat label="Region" value="US East" /><Stat label="Status" value="Healthy" trend="up" trendLabel="All systems go" />

Sparkline Slot

Pass any ReactNode to the sparkline prop to render a chart or visual in the top-right corner of the card. The slot is 32px tall and right-aligned.

<Statlabel="Weekly Signups"value={284}trend="up"trendLabel="+34 this week"sparkline={  <svg viewBox="0 0 64 32" className="h-8 w-16 text-success" fill="none">    <polyline      points="0,28 10,22 20,26 32,14 42,18 52,8 64,4"      stroke="currentColor"      strokeWidth="2"      strokeLinecap="round"      strokeLinejoin="round"    />  </svg>}/>

Without Animation

Set animated={false} to disable the count-up and slide animations entirely.

<Stat
	label="Total Users"
	value={12430}
	trend="up"
	trendLabel="+120 today"
	animated={false}
/>

Dashboard Grid

A typical 4-up KPI grid layout.

const stats = [
	{
		label: "Total Revenue",
		value: 128400,
		prefix: "$",
		trend: "up",
		trendLabel: "+12% this month",
	},
	{
		label: "Active Users",
		value: 8230,
		trend: "up",
		trendLabel: "+340 this week",
	},
	{
		label: "Avg. Order Value",
		value: 72,
		prefix: "$",
		trend: "up",
		trendLabel: "+$4 vs last month",
	},
	{
		label: "Churn Rate",
		value: 1.8,
		suffix: "%",
		trend: "down",
		trendLabel: "-0.2% this month",
	},
];

<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
	{stats.map((stat) => (
		<Stat key={stat.label} {...stat} />
	))}
</div>;

Props

Motion

• Count-up — Numeric values animate from 0 to the target using framer-motion's animate() with a 1s ease-out curve ([0.4, 0, 0.2, 1]). The displayed integer is derived from useMotionValue + useTransform.
• Value entrance — The value block uses the countUp preset (y: 12 → 0, opacity: 0 → 1).
• Trend entrance — The trend row uses slideUpSm with a 300ms delay, staggering after the value.
• Reduced motion — All animations are disabled when prefers-reduced-motion is active. The final value is displayed immediately.

Accessibility

• The animated count-up span is wrapped in aria-live="polite" and aria-atomic="true" so screen readers announce the final value after animation completes.
• Trend icons are aria-hidden="true" — context is conveyed via trendLabel text.
• The card element is a plain <div> — wrap in a <section> or add aria-label when used in a landmark region.

Design Tokens