Stats Card

Displays a metric with label, value, delta indicator, and optional sparkline.

Preview · Stats Card

Code

HTML · @primus/ui-core

<div class="hstack" style="flex-wrap:wrap;align-items:stretch">
  <div class="card stat" style="flex:1;min-width:140px">
    <span class="card-label">Monthly Revenue</span>
    <span class="card-value">$98.2k</span>
    <span class="card-delta up">+4% this month</span>
  </div>
  <div class="card stat" style="flex:1;min-width:140px">
    <span class="card-label">Churn Rate</span>
    <span class="card-value">2.1%</span>
    <span class="card-delta down">+0.3% rolling 30d</span>
  </div>
  <div class="card stat" style="flex:1;min-width:140px">
    <span class="card-label">Active Tenants</span>
    <span class="card-value">47</span>
  </div>
</div>

React

import { PrimusStatCard } from 'primus-react-ui';

<PrimusStatCard title="Monthly Revenue" value="$98.2k"
  change={{ value: 4, type: 'increase' }} description="this month" />
<PrimusStatCard title="Churn Rate" value="2.1%"
  change={{ value: 3, type: 'decrease' }} description="rolling 30d" />

Angular

<primus-stats-card label="Monthly Revenue" [value]="'$98.2k'"
  delta="+4%" trend="up" description="this month">
</primus-stats-card>
<primus-stats-card label="Churn Rate" [value]="'2.1%'"
  delta="+0.3%" trend="down">
</primus-stats-card>

Props

Prop	Type	Default	Description
title / label	string	required	Metric label e.g. "Monthly Revenue"
value	string | number	required	Metric value e.g. "$142k" or 3841
change	StatChange	—	React — delta badge configuration
delta	string	—	Angular — delta text e.g. "+12%"
trend	'up' | 'down' | 'flat'	'flat'	Angular — delta colour
description	string	—	Supporting text below the value
icon	ReactNode	—	Leading icon

TypeScript interfaces

interface StatChange {
  value: number;                       // Delta amount e.g. 12.4
  type:  'increase' | 'decrease';      // Determines colour: green / red
  unit?: '%' | string;                 // Appended to value display
}

// React examples
<PrimusStatCard
  title="Monthly Revenue"
  value="$98.2k"
  change={{ value: 4.2, type: 'increase', unit: '%' }}
  description="vs last month"
/>

<PrimusStatCard
  title="Churn Rate"
  value="1.8%"
  change={{ value: 0.2, type: 'decrease' }}
/>

// Angular examples
<primus-stats-card
  label="Monthly Revenue"
  [value]="'$98.2k'"
  delta="+4.2%"
  trend="up"
  description="vs last month">
</primus-stats-card>

<primus-stats-card
  label="Churn Rate"
  [value]="'1.8%'"
  delta="+0.2%"
  trend="down">
</primus-stats-card>

Props

Prop	Type	Default	Description
title / label	string	required	Card metric label
value	string | number	required	Metric value displayed large
change (React)	{ value: number; type: 'increase' | 'decrease' }	—	Change indicator
delta (Angular)	string	—	Delta text e.g. '+12%'
trend (Angular)	'up' | 'down' | 'neutral'	—	Arrow direction and colour
description	string	—	Supporting text below value
icon	ReactNode | string	—	Leading icon

TypeScript interfaces

// React
interface StatCardProps {
  title:       string;
  value:       string | number;
  description?: string;
  icon?:       React.ReactNode;
  change?: {
    value: number;                        // e.g. 12 (means +12%)
    type:  'increase' | 'decrease';       // Controls colour: green / red
  };
}

// Example
<PrimusStatCard
  title="Monthly Revenue"
  value="$98.2k"
  description="vs last month"
  change={{ value: 4.2, type: 'increase' }}
/>

<PrimusStatCard
  title="Churn Rate"
  value="1.8%"
  change={{ value: 0.2, type: 'decrease' }}
/>

Version history

See the Changelog for version history and breaking changes.