Avatar

BJ

TK

WA

SH

FS

---
import { Avatar, AvatarFallback, AvatarImage } from '@bejamas/ui/components/avatar';
---

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

View CodeHide Code

Installation

bun

bunx bejamas add avatar

npm

npx bejamas add avatar

pnpm

pnpm dlx bejamas add avatar

yarn

yarn dlx bejamas add avatar

Usage

---
import { Avatar, AvatarImage, AvatarFallback } from '@bejamas/ui/components/avatar';
---

<Avatar>
  <AvatarImage>
    <img src="https://github.com/thomkrupa.png" alt="@thomkrupa" />
  </AvatarImage>
  <AvatarFallback>TK</AvatarFallback>
</Avatar>