UserList

A list component that displays multiple users using UserCard components. Supports selection, loading states, and custom empty states.

Installation

typescript

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

Basic Usage

Display a list of users with their roles and status badges.

svelte

<UserList users={users} />

With Selection

Enable selection by providing onselect and selectedId props.

Selected: None

svelte

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

<UserList
  users={users}
  selectedId={selectedId}
  onselect={(user) => selectedId = user.id}
/>

Loading State

Show a loading spinner while fetching users.

svelte

<UserList users={users} loading={true} />

Empty State

Show a message when the list has no users.

No team members found

svelte

<UserList users={[]} emptyMessage="No team members found" />

Custom Empty State

Use a snippet for a custom empty state with action buttons.

No users in this team yet

svelte

<UserList users={[]}>
  {#snippet empty()}
    <div class="custom-empty">
      <p>No users yet</p>
      <button>Invite Users</button>
    </div>
  {/snippet}
</UserList>

Props

Prop	Type	Default	Description
`users` *	`UserWithProfile[]`	-	Array of user objects with their profiles and optional roles
`selectedId`	`string \| null`	`null`	ID of the currently selected user
`onselect`	`(user: User) => void`	-	Callback when a user card is clicked
`emptyMessage`	`string`	`'No users found'`	Message shown when the list is empty
`empty`	`Snippet`	-	Custom snippet to render when the list is empty
`loading`	`boolean`	`false`	Shows loading spinner instead of user list

TypeScript

typescript

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

interface UserWithProfile {
  user: User;
  profile: Profile;
  role?: string;
}

interface Props {
  users: UserWithProfile[];
  selectedId?: string | null;
  onselect?: (user: User) => void;
  emptyMessage?: string;
  empty?: Snippet;
  loading?: boolean;
}