Card
StatsGrid
Responsive grid wrapper that renders an array of XAStatsCard items.
StatsGrid
Responsive grid that renders an array of stat objects as <XAStatsCard> components.
Component
<XAStatsGrid />
Responsive grid that renders an array of stat objects as <XAStatsCard> components.
<XAStatsGrid
:stats="[
{ title: 'Revenue', value: 48500, format: 'currency', icon: 'i-lucide-dollar-sign', trend: 12.4 },
{ title: 'Users', value: 3200, format: 'number', icon: 'i-lucide-users', trend: -2.1 },
]"
:columns="2"
gap="md"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
stats | array | [] | Array of stat objects (see XAStatsCard props). |
columns | 1 | 2 | 3 | 4 | 5 | 6 | 4 | Number of columns at the widest breakpoint. |
gap | 'sm' | 'md' | 'lg' | 'md' | Grid gap size. |
locale | string | 'en-US' | Locale passed to each child card. |
AI Context
component: XAStatsGrid
package: "@xenterprises/nuxt-x-app"
use-when: Displaying a row of metrics on a dashboard overview page using a flat stats array. XAStatsGrid accepts a flat stats array and renders each item as an XAStatsCard.