Card
StatsCard
Stats card with value formatting, trend indicator, icon, and color theming.
StatsCard
Option-object-based stats card with full Intl number formatting and color theming.
Component
<XAStatsCard />
Option-object-based stats card with full Intl number formatting and color theming.
<XAStatsCard
title="Total Users"
:value="12400"
format="number"
icon="i-lucide-users"
color="primary"
:trend="5.2"
trend-label="from last month"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Required. Card label. |
value | number | string | undefined | Metric value. |
format | 'number' | 'currency' | 'percent' | 'number' | Number formatting mode. |
currency | string | 'USD' | ISO currency code for currency format. |
locale | string | 'en-US' | Locale for Intl formatting. |
icon | string | '' | Lucide icon name. |
color | string | 'primary' | Icon/accent color theme. |
trend | number | undefined | Percentage change. |
trendLabel | string | '' | Label beside the trend indicator. |
description | string | '' | Secondary description text. |
loading | boolean | false | Show loading skeleton. |
AI Context
component: XAStatsCard
package: "@xenterprises/nuxt-x-app"
use-when: Displaying a single KPI metric with Intl number formatting, trend indicator, and icon. Uses Intl formatting; for a simpler format prop approach use XACardStat.