StatCard

The example below loads live from Storybook; open it in Storybook for the controls.

Live example, StorybookOpen in Storybook

Default

A StatCard has a label, a value, a change and a period. Your app formats the value and the change with Intl and passes them in; StatCard never formats a number.

Total items

1.280

artış 8 %vs last month

LightDark

Copy code

import { StatCard } from '@bigbang/ui';

export default function Default() {
  return <StatCard label="Total items" value="1.280" delta={{ value: '8 %', direction: 'up' }} period="vs last month" className="w-full max-w-72" />;
}

Change direction and meaning

direction sets the arrow and the word that is read (up, down, flat). sentiment sets the colour. The default follows the direction: up is positive, down is negative, flat is neutral. For a measure where a fall is good news, use direction="down" with sentiment="positive".

Increase

1.280

artış 8 %vs last month

Decrease

940

azalış 3 %vs last month

No change

312

değişim yok 0 %vs last month

Decrease, positive

12

azalış 5 %vs last month

LightDark

Copy code

import { StatCard } from '@bigbang/ui';

export default function Deltas() {
  return (
    <div className="grid w-full gap-xl md:grid-cols-2">
      <StatCard label="Increase" value="1.280" delta={{ value: '8 %', direction: 'up' }} period="vs last month" />
      <StatCard label="Decrease" value="940" delta={{ value: '3 %', direction: 'down' }} period="vs last month" />
      <StatCard label="No change" value="312" delta={{ value: '0 %', direction: 'flat' }} period="vs last month" />
      <StatCard label="Decrease, positive" value="12" delta={{ value: '5 %', direction: 'down', sentiment: 'positive' }} period="vs last month" />
    </div>
  );
}

Trend

trend takes a small chart. Unlabelled content counts as decoration and is hidden from screen readers; to have it read, give the content role="img" and an aria-label. info explains how the number is counted.

Active users

3.420

artış 12 %vs last month

Total of the last 30 days.

Completion rate

76 %

azalış 2 %vs last month

LightDark

Copy code

import { StatCard } from '@bigbang/ui';

function Sparkline() {
  return (
    <svg width="96" height="32" viewBox="0 0 96 32" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="2,26 16,20 30,23 44,12 58,16 72,8 94,4" />
    </svg>
  );
}

export default function WithTrend() {
  return (
    <div className="grid w-full gap-xl md:grid-cols-2">
      <StatCard
        label="Active users"
        value="3.420"
        delta={{ value: '12 %', direction: 'up' }}
        period="vs last month"
        trend={<Sparkline />}
        info="Total of the last 30 days."
      />
      <StatCard
        label="Completion rate"
        value="76 %"
        delta={{ value: '2 %', direction: 'down' }}
        period="vs last month"
        trend={
          <span role="img" aria-label="Trend of the last seven days">
            <Sparkline />
          </span>
        }
      />
    </div>
  );
}

Loading, no data and hidden

While loading, the value and the change show placeholders and the root is aria-busy. When the value is null, undefined or an empty string, a dash (—) and its reason show. hidden is privacy mode: the value shows as ••••.

Total items

Yükleniyor

Active users

—bilgi yok

vs last month

Completion rate

••••Gizlendi

artış 8 %vs last month

LightDark

Copy code

import { StatCard } from '@bigbang/ui';

export default function States() {
  return (
    <div className="grid w-full gap-xl md:grid-cols-3">
      <StatCard label="Total items" value="1.280" delta={{ value: '8 %', direction: 'up' }} loading />
      <StatCard label="Active users" value={null} period="vs last month" />
      <StatCard label="Completion rate" value="1.280" delta={{ value: '8 %', direction: 'up' }} period="vs last month" hidden />
    </div>
  );
}

In a grid

Four tiles can sit side by side; tiles in one row use the same variant.

Total items

1.280

artış 8 %vs last month

Active users

3.420

azalış 3 %vs last month

Completion rate

76 %

değişim yok 0 %vs last month

Pending items

18

azalış 5 %vs last month

LightDark

Copy code

import { StatCard } from '@bigbang/ui';

export default function Grid() {
  return (
    <div className="grid w-full gap-xl md:grid-cols-2 lg:grid-cols-4">
      <StatCard label="Total items" value="1.280" delta={{ value: '8 %', direction: 'up' }} period="vs last month" />
      <StatCard label="Active users" value="3.420" delta={{ value: '3 %', direction: 'down' }} period="vs last month" />
      <StatCard label="Completion rate" value="76 %" delta={{ value: '0 %', direction: 'flat' }} period="vs last month" />
      <StatCard label="Pending items" value="18" delta={{ value: '5 %', direction: 'down', sentiment: 'positive' }} period="vs last month" />
    </div>
  );
}

Light and dark mode

StatCard takes every colour from surface, text and data tokens.

Light

Increase

1.280

artış 8 %vs last month

Decrease

940

azalış 3 %vs last month

No change

312

değişim yok 0 %vs last month

Decrease, positive

12

azalış 5 %vs last month

Dark

Increase

1.280

artış 8 %vs last month

Decrease

940

azalış 3 %vs last month

No change

312

değişim yok 0 %vs last month

Decrease, positive

12

azalış 5 %vs last month

Copy code

import { StatCard } from '@bigbang/ui';

export default function Deltas() {
  return (
    <div className="grid w-full gap-xl md:grid-cols-2">
      <StatCard label="Increase" value="1.280" delta={{ value: '8 %', direction: 'up' }} period="vs last month" />
      <StatCard label="Decrease" value="940" delta={{ value: '3 %', direction: 'down' }} period="vs last month" />
      <StatCard label="No change" value="312" delta={{ value: '0 %', direction: 'flat' }} period="vs last month" />
      <StatCard label="Decrease, positive" value="12" delta={{ value: '5 %', direction: 'down', sentiment: 'positive' }} period="vs last month" />
    </div>
  );
}