Metric card

A single KPI for dashboards.

Active projects

128

Monthly revenue

$48.2k

12%vs last month

Churn

1.8%

-0.4%vs last month

Metric cardLive · light and dark follow the theme switch

Usage

import { MetricCard } from '@stanvision/atomus-react';

<MetricCard label="Monthly revenue" value="$48.2k" change="12%" caption="vs last month" />

A single KPI for dashboards.

Provide

• label, value (pre-formatted), type simple · trend · chart (Figma: Type).
• change, caption (“vs last month”), trend (inferred from a leading “-”), data for the chart sparkline, action.

Do

• Keep four cards or fewer in a row; state the comparison period.

In Figma

Properties, variants and anatomy for the Figma component are on the Figma reference page. Prop names in React match the Figma property names.