User
UserCard
Compact bordered card with avatar, role badge, status indicator, optional selection, and actions slot.
User
The User category provides a set of composable components for displaying user identity. XAUserCard and XAUserItem cover card and list-row contexts. XAUserMenu handles the navigation header avatar + dropdown pattern. XAUserRoleBadge renders role strings as colored badges with automatic color mapping. XAUser is a drop-in alias for XAUserCard.
Components
<XAUserCard />
A compact bordered card that displays an avatar (via XAAvatar), user name, role badge, and online status indicator. Supports click events, selection state with a checkbox, and an #actions slot for trailing controls.
<!-- Flat props -->
<XAUserCard
name="John Doe"
email="john@example.com"
role="admin"
status="online"
size="md"
/>
<!-- User object -->
<XAUserCard :user="user" clickable @click="openProfile" />
<!-- With selection -->
<XAUserCard
:user="user"
selectable
:selected="selectedIds.has(user.id)"
@select="toggleSelect"
/>
<!-- With actions -->
<XAUserCard :user="user">
<template #actions>
<UButton size="xs" icon="i-lucide-pencil" variant="ghost" />
</template>
</XAUserCard>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
user | Object | null | User object with name, email, avatar, role, status, department. Individual props take priority over object fields. |
name | String | '' | Display name. |
email | String | '' | Email address. |
avatar | String | '' | Avatar image URL. |
role | String | '' | Role string passed to XAUserRoleBadge. |
roleColor | String | '' | Override color for the role badge. |
department | String | '' | Department or team name (available for layout use). |
status | String | '' | Online status — 'online', 'offline', 'away', or 'busy'. |
size | String | 'md' | Card size — 'sm', 'md', or 'lg'. |
clickable | Boolean | false | Adds hover styles and emits click when the card is clicked. |
selected | Boolean | false | Highlights the card with a primary ring. |
selectable | Boolean | false | Shows a checkbox for multi-select scenarios. |
Events
| Event | Payload | Description |
|---|---|---|
click | — | Emitted when the card is clicked (requires clickable). |
select | Boolean | Emitted from the checkbox when selectable is true. |
Slots
| Slot | Description |
|---|---|
actions | Trailing area for action buttons. Falls back to default slot. |
AI Context
component: XAUserCard
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
category: User
use-when: Rendering a bordered card representation of a user in grid layouts or selection lists. Supports flat props or a user object. Includes role badge, status indicator, selection checkbox, and an actions slot.