Card
CardStat
Single-metric stat card with value formatting, trend badge, icon, and optional color theming.
CardStat
Single-metric stat card with automatic number formatting, trend badge, and configurable icon.
Component
<XACardStat />
Single-metric stat card with automatic number formatting, trend badge, and configurable icon.
<XACardStat
label="Monthly Revenue"
:value="48500"
:trend="12.4"
trend-label="vs last month"
icon="i-lucide-dollar-sign"
icon-color="success"
format="currency"
currency-symbol="$"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Required. Metric label. |
value | string | number | — | Required. Metric value. |
trend | number | null | undefined | Percentage change (positive = up, negative = down). |
trendLabel | string | '' | Descriptive label beside the trend badge. |
description | string | '' | Secondary text below the value. |
icon | string | '' | Lucide icon name. |
iconColor | 'primary' | 'success' | 'warning' | 'error' | 'neutral' | 'primary' | Icon background/color theme. |
size | 'sm' | 'md' | 'lg' | 'md' | Value font size. |
format | 'number' | 'currency' | 'percent' | 'none' | 'none' | Number formatting mode. |
currencySymbol | string | '$' | Symbol prepended in currency format. |
AI Context
component: XACardStat
package: "@xenterprises/nuxt-x-app"
use-when: Displaying a single KPI metric on a dashboard with optional trend indicator and icon.