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/vue/components/StatCard";

Examples

Overview

size

variant

trendPosition

trendVariant

trend

tooltip

invertTrend

Sizes

Trend position

Trend variant

With icon

With progress

Accent border

accentColor

Inverted trend

invertTrend

API

Prop	Type	Default	Description
`label`	`string`	—	Required. Label describing the metric
`value`	`string \| number`	—	The primary metric value
`value slot`	`VNode[]`	—	Rich value content; takes precedence over the value prop
`description`	`string`	—	Subtitle below the value
`trend`	`{ value: number; label?: string }`	—	Trend indicator with percentage
`invert-trend`	`boolean`	`false`	Invert trend colors (positive = bad)
`trend-position`	`"value" \| "header"`	`"value"`	Where the trend indicator is rendered
`trend-variant`	`"text" \| "badge"`	`"text"`	Render trend as text or badge
`size`	`"default" \| "sm"`	`"default"`	Card size; sm for compact analytics layouts
`icon slot`	`VNode[]`	—	Icon displayed on the left with a soft background
`sparkline slot`	`VNode[]`	—	Chart rendered at the bottom
`progress`	`number`	—	Progress bar value (0-100)
`progress-label`	`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
`accent-color`	`"primary" \| "secondary" \| "danger" \| "info" \| "discovery" \| "success" \| "caution" \| "warning"`	`"primary"`	Left border color (accent variant)
`class`	`string`	—	Extra classes on the card element

Other attributes land on the card's root <div>.

Styling

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

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

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.

Stat Card