Plex UI

Stats Card

Stats card for dashboards displaying KPIs with trend deltas, an info tooltip, an icon, a progress bar, and an accent bar.

import { StatsCard } from "@plexui/ui/components/StatsCard";

Formerly StatCard. The old name and its import path @plexui/ui/components/StatCard still work but are deprecated.

Examples

Overview

size
variant
trendPosition
trendVariant
Total Revenue
$45,231
+12.5%
vs last month

API

PropTypeDefaultDescription
labelstring—Required. Label describing the metric
valueReactNode—Required. The primary metric value
descriptionstring—Subtitle below the value
trend{ value: number; label?: string }—Trend indicator with percentage
invertTrendbooleanfalseInvert 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
iconReactNode—Icon in a small soft tile at the end of the header
sparklineReactNode—Chart rendered at the bottom
progressnumber—Progress bar value (0-100)
progressLabelstring—Label after the progress bar
tooltipstring—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"Color of the accent bar (accent variant)
classNamestring—Extra classes on the card element

Styling

Stats Card reads these component tokens. Override them at any scope to restyle it:

  • --stats-card-accent-width: accent width (default 4px)
  • --stats-card-background: background (default var(--color-surface))
  • --stats-card-border-color: border color (default var(--color-border))
  • --stats-card-description-color: description color (default var(--color-text-tertiary))
  • --stats-card-description-font-size: description font size (default var(--font-text-sm-size))
  • --stats-card-icon-color: icon color (default var(--color-text-primary))
  • --stats-card-icon-size: icon size (default 16px)
  • --stats-card-icon-wrapper-background: icon wrapper background (default var(--color-background-primary-soft-alpha))
  • --stats-card-icon-wrapper-radius: icon wrapper radius (default var(--radius-md))
  • --stats-card-icon-wrapper-size: icon wrapper size (default 32px)
  • --stats-card-info-icon-size: info icon size (default 16px)
  • --stats-card-label-color: label color (default var(--color-text-secondary))
  • --stats-card-label-font-size: label font size (default var(--font-text-sm-size))
  • --stats-card-padding: padding (default spacing(5))
  • --stats-card-progress-background: progress background (default light-dark(var(--alpha-08), var(--alpha-12)))
  • --stats-card-progress-fill: progress fill (default var(--color-background-primary-solid))
  • --stats-card-progress-height: progress height (default 4px)
  • --stats-card-progress-radius: progress radius (default var(--radius-full))
  • --stats-card-radius: radius (default var(--radius-xl))
  • --stats-card-sm-description-font-size: sm description font size (default var(--font-text-xs-size))
  • --stats-card-sm-icon-size: sm icon size (default 14px)
  • --stats-card-sm-icon-wrapper-radius: sm icon wrapper radius (default var(--radius-sm))
  • --stats-card-sm-icon-wrapper-size: sm icon wrapper size (default 28px)
  • --stats-card-sm-info-icon-size: sm info icon size (default 14px)
  • --stats-card-sm-label-font-size: sm label font size (default var(--font-text-xs-size))
  • --stats-card-sm-padding-block: sm padding block (default spacing(3))
  • --stats-card-sm-padding-inline: sm padding inline (default spacing(4))
  • --stats-card-sm-trend-font-size: sm trend font size (default var(--font-text-xs-size))
  • --stats-card-sm-value-font-size: sm value font size (default var(--font-heading-md-size))
  • --stats-card-trend-font-size: trend font size (default var(--font-text-sm-size))
  • --stats-card-trend-font-weight: trend font weight (default var(--font-weight-semibold))
  • --stats-card-trend-negative-color: trend negative color (default var(--color-text-danger-soft))
  • --stats-card-trend-neutral-color: trend neutral color (default var(--color-text-tertiary))
  • --stats-card-trend-positive-color: trend positive color (default var(--color-text-success-soft))
  • --stats-card-value-color: value color (default var(--color-text))
  • --stats-card-value-font-size: value font size (default var(--font-heading-xl-size))
  • --stats-card-value-font-weight: value font weight (default var(--font-weight-semibold))

Related components

CardCard surface for composing login flows, sign-up forms, pricing tiles, payment methods, empty states, and stat showcases.BadgeCompact label for statuses and inline metadata, with semantic colors, three variants and sizes, icon support, and a loading state.ProgressA horizontal bar that shows task completion, with determinate and indeterminate modes, labelled layouts, and smooth value transitions.

On this page

ExamplesOverviewAPIStyling