Stat Card
React stat card component for dashboards displaying KPIs with trend deltas, info tooltip, icon, progress bar, and accent border styling
import { StatCard } from "@plexui/ui/components/StatCard";Examples
Overview
size
variant
trendPosition
trendVariant
Total Revenue
$45,231
+12.5%
Sizes
Total Revenue
$45,231
+12.5%
Active Users
2,847
+8.2%
Conversion Rate
3.24%
-1.8%
Total Inquiries
3,544
-2.6%
Completion Rate
89.2%
+0.5%
Approval Rate
84.6%
+1.8%
Trend position
Revenue
$45,231
+12.5%
Revenue
+12.5%
$45,231
Trend variant
Users
2,847
+8.2%
Users
2,847
+8.2%
Info tooltip
Avg Completion Rate
89.2%
+0.5%
With icon
Total Revenue
$45,231
+12.5%
Active Users
2,847
+8.2%
Revenue
$45,231
+12.5%
Users
2,847
+8.2%
Orders
1,234
-3.1%
With progress
Storage Used
7.2 GB
of 10 GB
72%
Accent border
accentColor
Total Revenue
$45,231
+12.5%
Inverted trend
Avg Response Time
234ms
+15.3%
Reference
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Label describing the metric |
value | ReactNode | — | The primary metric value |
description | string | — | Subtitle below the value |
trend | { value: number; label?: string } | — | Trend indicator with percentage |
invertTrend | boolean | false | Invert trend colors (positive = bad) |
trendPosition | "value" | "header" | "value" | Where the trend indicator is rendered |
trendVariant | "text" | "badge" | "text" | Render trend as text or badge |
size | "default" | "sm" | "default" | Card size — sm for compact analytics layouts |
icon | ReactNode | — | Icon displayed on the left with a soft background |
sparkline | ReactNode | — | Chart rendered at the bottom |
progress | number | — | Progress bar value (0-100) |
progressLabel | string | — | Label next to progress bar |
tooltip | string | — | Shows an info icon next to the label with tooltip text |
variant | "default" | "accent" | "default" | Visual variant |
accentColor | "primary" | "secondary" | "danger" | "info" | "discovery" | "success" | "caution" | "warning" | "primary" | Left border color (accent variant) |