Stat Card
Stat card for dashboards displaying KPIs with trend deltas, an info tooltip, an icon, a 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%
API
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Required. Label describing the metric |
value | ReactNode | — | Required. 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. Use 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) |
className | string | — | Extra classes on the card element |
Styling
Stat Card reads these component tokens. Override them at any scope to restyle it:
--stat-card-accent-width: accent width (default3px)--stat-card-background: background (defaultvar(--color-surface))--stat-card-border-color: border color (defaultvar(--color-border))--stat-card-description-color: description color (defaultvar(--color-text-tertiary))--stat-card-description-font-size: description font size (defaultvar(--font-text-sm-size))--stat-card-icon-color: icon color (defaultvar(--color-text-primary))--stat-card-icon-size: icon size (default24px)--stat-card-icon-wrapper-background: icon wrapper background (defaultvar(--color-background-primary-soft-alpha))--stat-card-icon-wrapper-radius: icon wrapper radius (defaultvar(--radius-md))--stat-card-info-icon-size: info icon size (default16px)--stat-card-label-color: label color (defaultvar(--color-text-secondary))--stat-card-label-font-size: label font size (defaultvar(--font-text-sm-size))--stat-card-padding: padding (defaultspacing(5))--stat-card-progress-background: progress background (defaultlight-dark(var(--alpha-08), var(--alpha-12)))--stat-card-progress-fill: progress fill (defaultvar(--color-background-primary-solid))--stat-card-progress-height: progress height (default4px)--stat-card-progress-radius: progress radius (defaultvar(--radius-full))--stat-card-radius: radius (defaultvar(--radius-xl))--stat-card-sm-description-font-size: sm description font size (defaultvar(--font-text-xs-size))--stat-card-sm-icon-size: sm icon size (default20px)--stat-card-sm-icon-wrapper-radius: sm icon wrapper radius (defaultvar(--radius-sm))--stat-card-sm-info-icon-size: sm info icon size (default14px)--stat-card-sm-label-font-size: sm label font size (defaultvar(--font-text-xs-size))--stat-card-sm-padding-block: sm padding block (defaultspacing(3))--stat-card-sm-padding-inline: sm padding inline (defaultspacing(4))--stat-card-sm-trend-font-size: sm trend font size (defaultvar(--font-text-xs-size))--stat-card-sm-value-font-size: sm value font size (defaultvar(--font-heading-md-size))--stat-card-trend-font-size: trend font size (defaultvar(--font-text-sm-size))--stat-card-trend-font-weight: trend font weight (defaultvar(--font-weight-semibold))--stat-card-trend-negative-color: trend negative color (defaultvar(--color-text-danger-soft))--stat-card-trend-neutral-color: trend neutral color (defaultvar(--color-text-tertiary))--stat-card-trend-positive-color: trend positive color (defaultvar(--color-text-success-soft))--stat-card-value-color: value color (defaultvar(--color-text))--stat-card-value-font-size: value font size (defaultvar(--font-heading-xl-size))--stat-card-value-font-weight: value font weight (defaultvar(--font-weight-semibold))