UserCard

A compact card component for displaying user information including avatar, name, email, role, and status. Supports selection and click interactions with Material 3 styling.

Installation

typescript

import { UserCard } from '@happyvertical/smrt-users/svelte';

Basic Usage

Display user information in a clean, compact card format.

svelte

<UserCard user={user} profile={profile} />

With Role and Status

Add role and status badges to provide more context about the user.

svelte

<UserCard user={user} profile={profile} role="Admin" status="active" />
<UserCard user={user} profile={profile} role="Member" status="pending" />
<UserCard user={user} profile={profile} role="Guest" status="suspended" />

Interactive Cards

Provide an onclick handler to make cards clickable with hover effects.

Selected: None

svelte

<script lang="ts">
  let selectedUser = $state<string | null>(null);
</script>

<UserCard
  user={user}
  profile={profile}
  onclick={() => selectedUser = user.id}
  selected={selectedUser === user.id}
/>

Status Variants

The status badge automatically styles based on the status value.

svelte

<UserCard user={activeUser} profile={profile} status="active" />
<UserCard user={pendingUser} profile={profile} status="pending" />
<UserCard user={suspendedUser} profile={profile} status="suspended" />
<UserCard user={deactivatedUser} profile={profile} status="deactivated" />

Props

Prop	Type	Default	Description
`user` *	`User`	-	User object containing email and status
`profile` *	`Profile`	-	Profile object containing user name
`role`	`string`	-	Optional role label to display
`status`	`string`	-	Status badge text (active, pending, suspended, deactivated)
`onclick`	`() => void`	-	Click handler - makes the card interactive when provided
`selected`	`boolean`	`false`	Whether the card is in a selected state

TypeScript

typescript

import type { User } from '@happyvertical/smrt-users';
import type { Profile } from '@happyvertical/smrt-profiles';

interface Props {
  user: User;
  profile: Profile;
  role?: string;
  status?: string;
  onclick?: () => void;
  selected?: boolean;
}