Stat Card

A KPI card with spotlight hover behavior, optional radial progress, trend deltas, and embedded sparkline support.

Preview & Interactive Laboratory

Expansion MRR
$184.2K
+12.4%vs last week

Qualified revenue added across active enterprise accounts.

Pipeline Coverage
3.6x
+4.1%vs last week

Weighted pipeline against upcoming quarterly target.

Risk Events
7
-18.0%vs last week

Open incidents still requiring owner acknowledgement.

Usage & Implementation

<StatCard title="Expansion MRR" value="$184.2K" trend="+12.4%" color="#7c3aed" progress={74} sparkData={[32, 40, 38, 56]} />
React / Tailwind

Granular Customization

1

Accent Color

Drives radial progress, spotlight tint, and trend emphasis.

className={`color='#7c3aed'`}
2

Trend Cluster

Shows positive or negative delta states with directional icons.

className={`trend='+12.4%'`}
3

Data Widgets

Enable radial and sparkline visuals only when the related props are provided.

className={`progress / sparkData`}

API Reference (Props)

PropTypeDefaultDescription
titlestring-KPI label text.
valuestring-Primary metric display.
trendstring-Positive or negative change value.
colorstring-Accent color used across visual treatments.
progressnumber-Optional radial progress percentage.
sparkDatanumber[]-Optional sparkline series.