AvatarPreview

src/lib/components/ui/avatar-preview/AvatarPreview.svelte

Purpose

A reusable avatar preview block for Profile, Create User, and Edit User form pages. Renders a hex-shaped avatar with initials derived from the display name, using either the user-selected color or a deterministic chrome-palette fallback. Created to consolidate the duplicated Avatar + AvatarFallback block across those pages.

Origin

Custom — Primebrick-written. Composes shadcn-svelte™ Avatar + AvatarFallback and the useAvatarPreview composable. Not vendored from any registry.

Usage

Default

Code
<AvatarPreview
  displayName={formData.display_name}
  avatarColor={formData.avatar_color}
/>

With a custom default seed

Code
<AvatarPreview
  displayName={formData.display_name}
  avatarColor={formData.avatar_color}
  defaultSeed="??"
/>

When avatarColor is undefined, a deterministic chrome-palette class is applied (derived from the display name seed) so every user gets a stable fallback color.

Props

Full prop table: see API reference — avatarpreview.

Props: displayName: string | undefined, avatarColor: string | undefined, defaultSeed?: string = "??".

Next steps

• Component catalog
• ColorSelector — used alongside this in user forms
• API reference