StatCard

Stable

A single key metric with its change, period and an optional chart.

Use StatCard at the top of dashboards for the few numbers that matter. The change is shown as a coloured badge and also announced in words, such as "up 12% from last month", so it never depends on colour. Use invert for metrics where a decrease is good.

Source Edit docs Report an issue

Overview

Active signatures

1,284

up 12% from last month

tsx

import { Icon, StatCard } from '@bindshq/stance-react';

export function Basic() {
  return (
    <StatCard
      label="Active signatures"
      value="1,284"
      delta="12%"
      trend="up"
      comparison="from last month"
      icon={<Icon name="pen-nib" />}
      style={{ width: 280 }}
    />
  );
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Active signatures

1,284

up 12% from last month

Light

Active signatures

1,284

up 12% from last month

Dark

Active signatures

1,284

up 12% from last month

High contrast

Import

tsx

import { StatCard } from '@bindshq/stance-react';

Platforms

StatCard has native counterparts. They share Stance tokens and intent, and use each platform’s own controls and conventions. The live previews on this page are the web implementation.

tsx

import { StatCard } from '@bindshq/stance-react';

Playground

Active signatures

1,284

up 12% from last month

tsx

<StatCard />

Examples

Dashboard row

Mailboxes

312

up 4% this week

Templates

unchanged this week

Contracts signed

down 9% vs. October

tsx

import { StatCard } from '@bindshq/stance-react';

export function Dashboard() {
  return (
    <div
      style={{
        display: 'grid',
        gap: 16,
        gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
        width: '100%',
      }}
    >
      <StatCard label="Mailboxes" value="312" delta="4%" trend="up" comparison="this week" />
      <StatCard label="Templates" value="24" delta="0" comparison="this week" />
      <StatCard
        label="Contracts signed"
        value="58"
        delta="9%"
        trend="down"
        comparison="vs. October"
      />
    </div>
  );
}

Down is good

invert flips the sentiment for metrics like failures or churn.

Failed deployments

down 40% from last week

tsx

import { Icon, StatCard } from '@bindshq/stance-react';

export function Inverted() {
  return (
    <StatCard
      label="Failed deployments"
      value="3"
      delta="40%"
      trend="down"
      invert
      comparison="from last week"
      icon={<Icon name="alert-triangle" />}
      style={{ width: 280 }}
    />
  );
}

With a sparkline

New users

up 18% this week

tsx

import { StatCard } from '@bindshq/stance-react';

export function WithChart() {
  const points = [12, 18, 15, 22, 26, 24, 31, 35];
  const max = Math.max(...points);
  const d = points
    .map(
      (p, i) => `${i === 0 ? 'M' : 'L'}${(i / (points.length - 1)) * 100},${40 - (p / max) * 36}`,
    )
    .join(' ');
  return (
    <StatCard
      label="New users"
      value="35"
      delta="18%"
      trend="up"
      comparison="this week"
      chart={
        <svg viewBox="0 0 100 40" preserveAspectRatio="none" aria-hidden="true">
          <path
            d={d}
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            vectorEffect="non-scaling-stroke"
          />
        </svg>
      }
      footer={<a href="#users">View all users</a>}
      style={{ width: 300 }}
    />
  );
}

Loading

Contracts signed

API reference

Prop	Type	Default	Description
`label`* required	`ReactNode`	None	What is measured.
`value`* required	`ReactNode`	None	The headline figure, pre-formatted.
`delta`	`ReactNode`	None	Change since the comparison period.
`trend`	`'up' \| 'down' \| 'neutral'`	`'neutral'`	Direction of change.
`invert`	`boolean`	`false`	Treat down as positive.
`comparison`	`string`	None	Period text, included in the announcement.
`icon`	`ReactNode`	None	Icon beside the label.
`chart`	`ReactNode`	None	Chart slot, e.g. a decorative sparkline.
`footer`	`ReactNode`	None	Footer content such as a details link.
`loading`	`boolean`	`false`	Show a placeholder and aria-busy.

Accessibility

The visible delta badge is hidden from screen readers and replaced with a sentence such as "up 12% from last month".
Positive and negative sentiment are shown with colour and an arrow icon, never colour alone.
Mark decorative charts aria-hidden. If the chart carries information not in the value, provide a text alternative.
loading sets aria-busy on the card.

Usage guidelines

Do

Format values with units and locale separators before passing them.
Limit a row to four cards.

Don’t

Use StatCard for long text or lists.

Overview

Active signatures

1,284

up 12% from last month

tsx

import { Icon, StatCard } from '@bindshq/stance-react';

export function Basic() {
  return (
    <StatCard
      label="Active signatures"
      value="1,284"
      delta="12%"
      trend="up"
      comparison="from last month"
      icon={<Icon name="pen-nib" />}
      style={{ width: 280 }}
    />
  );
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Active signatures

1,284

up 12% from last month

Light

Active signatures

1,284

up 12% from last month

Dark

Active signatures

1,284

up 12% from last month

High contrast

Platforms

StatCard has native counterparts. They share Stance tokens and intent, and use each platform’s own controls and conventions. The live previews on this page are the web implementation.

tsx

import { StatCard } from '@bindshq/stance-react';

Examples

Dashboard row

Mailboxes

312

up 4% this week

Templates

unchanged this week

Contracts signed

down 9% vs. October

tsx

import { StatCard } from '@bindshq/stance-react';

export function Dashboard() {
  return (
    <div
      style={{
        display: 'grid',
        gap: 16,
        gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
        width: '100%',
      }}
    >
      <StatCard label="Mailboxes" value="312" delta="4%" trend="up" comparison="this week" />
      <StatCard label="Templates" value="24" delta="0" comparison="this week" />
      <StatCard
        label="Contracts signed"
        value="58"
        delta="9%"
        trend="down"
        comparison="vs. October"
      />
    </div>
  );
}

Down is good

invert flips the sentiment for metrics like failures or churn.

Failed deployments

down 40% from last week

tsx

import { Icon, StatCard } from '@bindshq/stance-react';

export function Inverted() {
  return (
    <StatCard
      label="Failed deployments"
      value="3"
      delta="40%"
      trend="down"
      invert
      comparison="from last week"
      icon={<Icon name="alert-triangle" />}
      style={{ width: 280 }}
    />
  );
}

Loading

Contracts signed

API reference

Prop	Type	Default	Description
`label`* required	`ReactNode`	None	What is measured.
`value`* required	`ReactNode`	None	The headline figure, pre-formatted.
`delta`	`ReactNode`	None	Change since the comparison period.
`trend`	`'up' \| 'down' \| 'neutral'`	`'neutral'`	Direction of change.
`invert`	`boolean`	`false`	Treat down as positive.
`comparison`	`string`	None	Period text, included in the announcement.
`icon`	`ReactNode`	None	Icon beside the label.
`chart`	`ReactNode`	None	Chart slot, e.g. a decorative sparkline.
`footer`	`ReactNode`	None	Footer content such as a details link.
`loading`	`boolean`	`false`	Show a placeholder and aria-busy.

Accessibility

The visible delta badge is hidden from screen readers and replaced with a sentence such as "up 12% from last month".

Positive and negative sentiment are shown with colour and an arrow icon, never colour alone.

Mark decorative charts aria-hidden. If the chart carries information not in the value, provide a text alternative.

loading sets aria-busy on the card.

Overview

Light, dark and high contrast

Import

Platforms

Playground

Examples

API reference

Accessibility

Usage guidelines

Do

Don’t

Related

Overview

Light, dark and high contrast

Import

Platforms

Playground

Examples

API reference

Accessibility

Usage guidelines

Do

Don’t

Related