Components

Stat

A key metric: label, a large tabular value, a delta chip whose color follows whether the change is good, and a line of context.

Usage

Use it for:

  • The 2–6 numbers a dashboard is about.
  • Showing a change and whether it is good or bad.

Avoid it when:

  • The number needs its history: pair it with a Sparkline or use a LineChart.
  • You have many numbers: use a Table.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Examples

KPI grid

upIsGood={false} turns a rising cost red and a falling one green.

Balance
$12,480.20
Up +$1,120this month
Income
$5,150.00
Up +4.2%vs September
Spending
$1,808.54
Up +12%vs September
Subscriptions
$64.00
No change 0%4 active

With a sparkline

chart renders under the meta row; give the Sparkline its own label.

Revenue
$48.2k
Up +12%vs last month
Values: 31, 34, 33, 38, 41, 40, 45, 48

Project metrics

Open tasks
38
Down -6since Monday
Completed
112
Up +18this sprint
Cycle time
3.4 days
Up +0.6

API Reference

Stat

A <div>; other <div> props are forwarded.

PropTypeDefault
label
ReactNode
value
ReactNode
delta
ReactNode
trend
"up""down""flat"
upIsGood
boolean
true
deltaTone
"neutral""accent""success""warning""danger""info"
description
ReactNode
icon
IconName
chart
ReactNode
className
string

Accessibility

No keyboard interaction of its own.

ARIA and semantics:

  • The trend is also spoken as a word ("Up", "Down", "No change") before the delta, so it never relies on the arrow or the color.
  • Icons are decorative (aria-hidden).
  • Values use tabular numbers so columns of stats line up.
© 2026 Motion. Internal documentation.