Card
CardActiveUsers
Card showing an active user count with an avatar stack and trend indicator.
CardActiveUsers
Displays an active-user count with a stacked avatar list, trend indicator, and overflow badge. Avatars can include images or fall back to initials.
Component
<XACardActiveUsers />
Renders a label, formatted count, a horizontally stacked list of user avatars (with overflow badge), and an optional trend percentage with label.
<XACardActiveUsers
label="Active Members"
count="1,234"
:users="[
{ name: 'Alice Johnson', avatar: '/avatars/alice.png' },
{ name: 'Bob Smith' },
{ name: 'Carol White', avatar: '/avatars/carol.png' },
]"
:trend="12.5"
trend-label="from last month"
:max-display="4"
subtitle="currently online"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Required. Card label. |
count | string | number | — | Required. Active user count (can be pre-formatted like '12.4k'). |
users | { name: string; avatar?: string }[] | [] | Users to show in the avatar stack. |
trend | number | undefined | Percentage trend (positive or negative). |
trendLabel | string | 'from previous month' | Text label beside the trend. |
maxDisplay | number | 4 | Max avatars before showing +X more. |
subtitle | string | '' | Text shown beside the avatar stack. |
AI Context
component: XACardActiveUsers
package: "@xenterprises/nuxt-x-app"
use-when: Dashboard card showing online or active user count with a visual avatar stack and month-over-month trend.