Avatar

Preview

BJ

TK

WA

SH

FS

Source

---
import Avatar from '@bejamas/ui/components/Avatar.astro';
---

<div class="flex flex-row flex-wrap items-center gap-12">
  <Avatar>
    <Avatar part="image">
      <img src="https://github.com/bejamas.png" alt="@bejamas" />
    </Avatar>
    <Avatar part="fallback">BJ</Avatar>
  </Avatar>
  <Avatar class="rounded-lg">
    <Avatar part="image">
      <img src="https://github.com/thomkrupa.png" alt="@thomkrupa" />
    </Avatar>
    <Avatar part="fallback">TK</Avatar>
  </Avatar>
  <div class="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
    <Avatar>
      <Avatar part="image">
        <img src="https://github.com/withastro.png" alt="@withastro" />
      </Avatar>
      <Avatar part="fallback">WA</Avatar>
    </Avatar>
    <Avatar>
      <Avatar part="image">
        <img src="https://github.com/shadcn.png" alt="@shadcn" />
      </Avatar>
      <Avatar part="fallback">SH</Avatar>
    </Avatar>
    <Avatar>
      <Avatar part="image">
        <img src="https://github.com/fredkschott.png" alt="@fredkschott" />
      </Avatar>
      <Avatar part="fallback">FS</Avatar>
    </Avatar>
  </div>
</div>

Installation

CLI

bun

 bunx bejamas add avatar

npm

 npx bejamas add avatar

pnpm

 pnpm dlx bejamas add avatar

yarn

 yarn dlx bejamas add avatar

Manual

---
/**
 * @component Avatar
 * @title Avatar
 * @description An image representing a user or entity, with fallback support when unavailable.
 *
 * @preview
 * <div class="flex flex-row flex-wrap items-center gap-12">
 *   <Avatar>
 *     <Avatar part="image">
 *       <img src="https://github.com/bejamas.png" alt="@bejamas" />
 *     </Avatar>
 *     <Avatar part="fallback">BJ</Avatar>
 *   </Avatar>
 *   <Avatar class="rounded-lg">
 *     <Avatar part="image">
 *       <img src="https://github.com/thomkrupa.png" alt="@thomkrupa" />
 *     </Avatar>
 *     <Avatar part="fallback">TK</Avatar>
 *   </Avatar>
 *   <div class="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
 *     <Avatar>
 *       <Avatar part="image">
 *         <img src="https://github.com/withastro.png" alt="@withastro" />
 *       </Avatar>
 *       <Avatar part="fallback">WA</Avatar>
 *     </Avatar>
 *     <Avatar>
 *       <Avatar part="image">
 *         <img src="https://github.com/shadcn.png" alt="@shadcn" />
 *       </Avatar>
 *       <Avatar part="fallback">SH</Avatar>
 *     </Avatar>
 *     <Avatar>
 *       <Avatar part="image">
 *         <img src="https://github.com/fredkschott.png" alt="@fredkschott" />
 *       </Avatar>
 *       <Avatar part="fallback">FS</Avatar>
 *     </Avatar>
 *   </div>
 * </div>
 *
 * @usage
 *
 * ```astro
 * ---
 * import Avatar from '@/components/ui/Avatar.astro';
 * ---
 *
 * <Avatar>
 *   <Avatar part="image">
 *     <img src="https://github.com/thomkrupa.png" alt="@thomkrupa" />
 *   </Avatar>
 *   <Avatar part="fallback">TK</Avatar>
 * </Avatar>
 * ```
 */

import { cn } from "@bejamas/ui/lib/utils";
import type { HTMLAttributes, HTMLTag } from "astro/types";

type AvatarPart = "root" | "image" | "fallback";

type AvatarRootProps = {
  part?: "root";
  as?: HTMLTag;
  class?: string;
} & HTMLAttributes<"div">;

type AvatarImageProps = {
  part: "image";
  as?: HTMLTag;
  class?: string;
} & HTMLAttributes<"div">;

type AvatarFallbackProps = {
  part: "fallback";
  as?: HTMLTag;
  class?: string;
} & HTMLAttributes<"div">;

type Props = AvatarRootProps | AvatarImageProps | AvatarFallbackProps;

const {
  part: rawPart,
  as: Tag = "div" as HTMLTag,
  class: className = "",
  ...rest
} = Astro.props as Props;

const part = (rawPart ?? "root") as AvatarPart;
---

{
  part === "root" && (
    <Tag
      {...rest}
      data-slot="avatar"
      class={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)}
    >
      <!-- New pattern slots -->
      <slot name="image" />
      <slot name="fallback" />
      <!-- Back-compat named slots -->
      <slot name="avatar-image" />
      <slot />
    </Tag>
  )
}

{
  part === "image" && (
    <Tag
      {...rest}
      slot="image"
      data-slot="avatar-image"
      class={cn("relative z-10 aspect-square size-full [&_img]:size-full [&_img]:object-cover", className)}
    >
      <slot />
    </Tag>
  )
}

{
  part === "fallback" && (
    <Tag
      {...rest}
      slot="fallback"
      data-slot="avatar-fallback"
      class={cn("absolute inset-0 bg-muted flex size-full items-center justify-center rounded-full text-muted-foreground font-medium uppercase select-none", className)}
    >
      <slot />
    </Tag>
  )
}

Usage

---
import Avatar from '@/components/ui/Avatar.astro';
---

<Avatar>
  <Avatar part="image">
    <img src="https://github.com/thomkrupa.png" alt="@thomkrupa" />
  </Avatar>
  <Avatar part="fallback">TK</Avatar>
</Avatar>