nuxt-x-app

User

User identity components including cards, list items, dropdown menus, and role badges.

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

`<XAUser />`

A convenience alias that renders XAUserCard with identical props and slots. Use it when you prefer the shorter component name in templates.

<XAUser name="Jane Smith" email="jane@example.com" role="admin" />

`<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.

`<XAUserItem />`

A flat list row suitable for displaying users, companies, or businesses inside menus, dropdowns, or list panels. Companies and businesses render a building/store icon instead of an avatar. Supports a badge next to the name, a description line, and a chevron for navigable items.

<!-- User -->
<XAUserItem name="John Doe" email="john@example.com" status="online" />

<!-- Company -->
<XAUserItem type="company" name="Acme Inc" subtitle="Technology" />

<!-- Business -->
<XAUserItem type="business" name="Local Coffee Shop" subtitle="123 Main St" />

<!-- Clickable with actions slot -->
<XAUserItem name="Jane" clickable @click="open">
  <template #actions>
    <UButton size="xs" icon="i-lucide-mail" variant="ghost" />
  </template>
</XAUserItem>

Props

Prop	Type	Default	Description
`name`	`String`	required	Display name.
`type`	`String`	`'user'`	Entity type — `'user'`, `'company'`, or `'business'`.
`avatar`	`String`	`''`	Avatar image URL (users only).
`email`	`String`	`''`	Email shown as subtitle when no explicit `subtitle` is set.
`role`	`String`	`''`	Role shown as subtitle when no `subtitle` or `email` is set.
`subtitle`	`String`	`''`	Custom subtitle — overrides email and role.
`description`	`String`	`''`	Second line of detail text.
`status`	`String`	`''`	Online status dot — `'online'`, `'offline'`, `'away'`, or `'busy'` (users only).
`badge`	`String \| Object`	`null`	Badge next to the name. Object form: `{ label, color, variant }`.
`size`	`String`	`'md'`	Row size — `'sm'`, `'md'`, or `'lg'`.
`clickable`	`Boolean`	`false`	Adds hover background and emits `click`.
`selected`	`Boolean`	`false`	Applies primary highlight background.
`showChevron`	`Boolean`	`true`	Shows a right-chevron when `clickable` is true and no actions slot is provided.

Events

Event	Description
`click`	Emitted when the row is clicked (requires `clickable`).

`<XAUserMenu />`

An avatar-based dropdown trigger that opens a UDropdownMenu with Profile, Settings, and Logout items. Designed for navigation headers. Supports compact mode (avatar only), optional status indicator, custom menu items via the customItems prop, and a header section inside the dropdown that shows name and email.

<!-- Basic -->
<XAUserMenu
  name="John Doe"
  email="john@example.com"
  avatar="/avatars/john.jpg"
  @profile="router.push('/profile')"
  @settings="router.push('/settings')"
  @logout="signOut()"
/>

<!-- From user object, compact -->
<XAUserMenu :user="currentUser" compact @logout="signOut()" />

<!-- Custom additional items -->
<XAUserMenu
  :user="currentUser"
  :custom-items="[[{ label: 'My Team', icon: 'i-lucide-users', onSelect: () => viewTeam() }]]"
  @logout="signOut()"
/>

Props

Prop	Type	Default	Description
`user`	`Object`	`null`	User object with `name`, `email`, `avatar`, `role`, `status`.
`name`	`String`	`''`	Display name.
`email`	`String`	`''`	Email address.
`avatar`	`String`	`''`	Avatar image URL.
`role`	`String`	`''`	Role shown under name in the trigger.
`status`	`String`	`null`	Online status — `'online'`, `'offline'`, `'away'`, or `'busy'`.
`size`	`String`	`'md'`	Avatar size — `'xs'`, `'sm'`, `'md'`, `'lg'`, or `'xl'`.
`compact`	`Boolean`	`false`	Show only the avatar (no name, chevron, or role).
`showStatus`	`Boolean`	`false`	Display status indicator on the avatar.
`showHeader`	`Boolean`	`true`	Show name/email header section inside the dropdown.
`showProfile`	`Boolean`	`true`	Include the Profile menu item.
`showSettings`	`Boolean`	`true`	Include the Settings menu item.

Events

Event	Description
`profile`	Emitted when Profile is selected.
`settings`	Emitted when Settings is selected.
`logout`	Emitted when Logout is selected.

`<XAUserRoleBadge />`

A thin wrapper around UBadge that auto-maps common role strings (admin, owner, manager, member, guest, etc.) to semantic colors. The mapping can be extended or overridden per instance via colorMap and color props.

<!-- Auto-colored -->
<XAUserRoleBadge role="admin" />

<!-- Custom color override -->
<XAUserRoleBadge role="vip" color="success" />

<!-- Extend the default color map -->
<XAUserRoleBadge role="developer" :color-map="{ developer: 'primary' }" />

Props

Prop	Type	Default	Description
`role`	`String`	required	Role string to display and auto-map to a color.
`label`	`String`	`''`	Custom label text (defaults to formatted `role` value).
`color`	`String`	`''`	Override the auto-mapped color.
`colorMap`	`Object`	`{}`	Additional role-to-color mappings merged with the built-in map.
`variant`	`String`	`'soft'`	Badge variant passed to `UBadge`.
`size`	`String`	`'sm'`	Badge size — `'xs'`, `'sm'`, or `'md'`.
`badgeClass`	`String`	`''`	Additional CSS classes applied to the badge element.

AI Context

category: User
package: "@xenterprises/nuxt-x-app"
use-when: >
  Use XAUserCard (or its alias XAUser) for bordered card representations of a user,
  such as in grid layouts or selection lists. Use XAUserItem for flat list rows inside
  menus, dropdowns, or list panels — it also handles company and business entity types.
  Use XAUserMenu in navigation headers where a user avatar triggers a profile/logout
  dropdown. Use XAUserRoleBadge anywhere a role string needs to be rendered as a
  color-coded badge; it can be used standalone or is automatically included by
  XAUserCard when a role is present.

Edit this pageorReport an issue

State

Standardized empty, error, and loading state components for consistent feedback across the application.

Wall

Social feed components for building post walls with reactions, threaded replies, tags, and rich text input.