Metric Card

The MetricCard displays a key metric with a title, value, and trend indicator. An optional graph area can be revealed via the showGraph prop with a named slot.

Props

Prop	Type	Default	Description
title	String	'Companies Engaged'	Label describing the metric
value	String | Number	'146'	The main metric value to display
trend	String	'100%'	Trend percentage shown next to the direction arrow
trendDirection	String	'up'	Direction of the trend — 'up' (green) or 'down' (red)
trendLabel	String	'vs last month'	Contextual label shown after the trend badge
showGraph	Boolean	false	When true, renders the #graph slot on the right side of the card

Slots

Slot	Description
graph	Optional graph content shown when showGraph is true

Basic Usage

<MetricCard
  title="Companies Engaged"
  value="146"
  trend="100%"
  trendDirection="up"
  trendLabel="vs last month"
/>

Companies Engaged

146

100%

vs last month

Trend Down

<MetricCard
  title="Churn Rate"
  value="3.2%"
  trend="12%"
  trendDirection="down"
  trendLabel="vs last month"
/>

Churn Rate

3.2%

12%

vs last month