Adv UI

KPI Card

A card for one key figure on a dashboard, with its change and an icon.
Stable
Web
iOS
Android
@advui/data
Source
Total revenue
$45,231.89
Increased by 20.1%
from last month
JSX
<KpiCard
  label="Total revenue"
  value="$45,231.89"
  delta="20.1%"
  description="from last month"
/>
PropsOpen in Playground
trend
variant

Installation

pnpm
pnpm add @advui/data
npm
npm install @advui/data

Usage

import { KpiCard } from '@advui/data'
import { CreditCardIcon } from '@advui/icons'

<KpiCard
  label="Total revenue"
  value="$45,231.89"
  delta="20.1%"
  trend="up"
  description="from last month"
  icon={<CreditCardIcon />}
/>

Examples

Basic

Total revenue
$45,231.89
Increased by 20.1%
from last month

Dashboard row

Fewer returns is good news: `tone="positive"` on a down trend.
Subscriptions
2,350
Increased by 180.1%
from last month
Orders
12,234
Decreased by 4.3%
from last month
Returns
312
Decreased by 11%
fewer than last month
Active now
573
No change: 0%
since last hour

With a progress bar

Quarterly target
$182,400
of $250,000
73% reached, 24 days left

Loading

New customers

API reference

KpiCard

Also takes every Card prop (`variant`, `interactive`, `onPress`…).
PropTypeDefaultDescription
label requiredReactNode—What is measured.
value requiredReactNode—The figure, already formatted.
deltaReactNode—The change, e.g. `"12.5%"`.
trend'up' | 'down' | 'neutral''neutral'Direction of the change; picks the arrow.
tone'positive' | 'negative' | 'neutral'from `trend`Good or bad news; picks the color. Set it when a drop is good.
trendLabelstringfrom `trend`Read by screen readers before the delta: 'Increased by', 'Decreased by' or 'No change:' for the `trend`.
descriptionReactNode—Short note after the delta.
iconReactNode—Decorative icon in the top corner.
loadingbooleanfalsePlaceholders for the value and delta; sets `aria-busy`.
childrenReactNode—Extra content below the figure, such as a Progress bar.

Accessibility

  • The card reads as plain text in order: label, value, change, note. The icon is hidden.
  • The change is read with its direction ("Increased by 20.1%"); set trendLabel to translate it.
  • While loading, the card has aria-busy and the placeholders are hidden.
  • An interactive card (interactive + onPress) needs a role and an aria-label, as with Card.

Responsive behavior

Card padding shrinks from 24px to 16px below the sm breakpoint. Lay cards out with Grid.

Related components

Stat
Card
Progress
Skeleton
Since v0.6.0Last updated Nov 2, 2026Edit this page on GitHub
PreviousKanban
NextStat