Avatar

Home Avatar

The Avatar component is used to represent a user. It can display a profile picture, the user’s initials, or a fallback icon if the image is not available.

<?php

use Lib\PHPXUI\{
    Avatar,
    AvatarFallback,
    AvatarImage
};

?>

<div class="flex flex-row flex-wrap items-center gap-12">
  <Avatar>
    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>

  <Avatar class="rounded-lg">
    <AvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
    <AvatarFallback>ER</AvatarFallback>
  </Avatar>

  <div class="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
    <Avatar>
      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarImage src="https://github.com/leerob.png" alt="@leerob" />
      <AvatarFallback>LR</AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
      <AvatarFallback>ER</AvatarFallback>
    </Avatar>
  </div>
</div>

Installation

npm

npx phpxui add Avatar

Usage

use Lib\PHPXUI\{
    Avatar,
    AvatarFallback,
    AvatarImage,
}

<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

Avatar const [copyName, setCopyName] = pp.state(false); const copyChildren = () => { navigator.clipboard.writeText('npx phpxui add Avatar'.trim()); setCopyName(true); setTimeout(() => { setCopyName(false); }, 2000); };

Installation

Usage