StatCard

A metric summary card — title, a large value, an optional icon, and an optional trend indicator (StatCard.Trend) showing percentage change with a directional arrow.

Import

import { StatCard } from '@flxui/uikit/business'

Basic Usage

import { StatCard } from '@flxui/uikit/business'
 
function Demo() {
  return <StatCard title="Active Users" value="12,483" />
}

With an icon

import { IconUsers } from '@tabler/icons-react'
 
;<StatCard title="Active Users" value="12,483" icon={<IconUsers size={18} />} />

With a trend indicator

StatCard.Trend renders a directional arrow, a percentage, and an optional description — pass it as a child of StatCard:

<StatCard title="Monthly Revenue" value="$48,200">
  <StatCard.Trend value={12.4} direction="up" description="vs. last month" />
</StatCard>

By default, direction="up" is styled as positive (green) and direction="down" as negative (red) — matching the usual “up is good” reading for metrics like revenue or active users.

Inverting the color semantics

For metrics where a decrease is actually the good outcome (churn rate, error rate, costs), set invertColor so direction="down" renders as positive instead:

<StatCard title="Churn Rate" value="2.1%">
  <StatCard.Trend value={0.8} direction="down" description="vs. last month" invertColor />
</StatCard>

Custom title/value styling

titleProps and valueProps forward directly to the underlying Typography components, so you can override size, color, weight, etc. without replacing the whole layout:

<StatCard title="Errors" value={0} valueProps={{ c: 'green' }} />

Additional content below the value

Anything passed as children renders inside the value area, below the value itself — StatCard.Trend is just the common case, but you can render arbitrary content there too:

<StatCard title="Storage Used" value="1.2 TB">
  <Progress value={62} size="sm" />
</StatCard>

Props

StatCard

Extends Card props.

Plus any other Card prop (shadow, withBorder, padding, etc.) is accepted and forwarded.

StatCard.Trend