Skip to content

Avatar

An image representing a user or entity, with fallback support when unavailable.

TK

WA

BJ

+2

1
---
2
import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from '@bejamas/ui/components/avatar';
3
---
4

5
<div class="flex flex-wrap items-center gap-4">
6
  <Avatar>
7
    <AvatarImage src="https://github.com/thomkrupa.png" alt="@thomkrupa" />
8
    <AvatarFallback>TK</AvatarFallback>
9
    <AvatarBadge />
10
  </Avatar>
11
  <AvatarGroup>
12
    <Avatar>
13
      <AvatarImage src="https://github.com/withastro.png" alt="@withastro" />
14
      <AvatarFallback>WA</AvatarFallback>
15
    </Avatar>
16
    <Avatar>
17
      <AvatarImage src="https://github.com/bejamas.png" alt="@bejamas" />
18
      <AvatarFallback>BJ</AvatarFallback>
19
    </Avatar>
20
    <AvatarGroupCount>+2</AvatarGroupCount>
21
  </AvatarGroup>
22
</div>

Installation

bunx bejamas add avatar

npx bejamas add avatar

pnpm dlx bejamas add avatar

yarn dlx bejamas add avatar

Usage

1
---
2
import {
3
  Avatar,
4
  AvatarImage,
5
  AvatarFallback,
6
  AvatarBadge,
7
  AvatarGroup,
8
  AvatarGroupCount,
9
} from '@bejamas/ui/components/avatar';
10
---
11

12
<Avatar size="lg">
13
  <AvatarImage src="https://github.com/thomkrupa.png" alt="@thomkrupa" />
14
  <AvatarFallback>TK</AvatarFallback>
15
  <AvatarBadge />
16
</Avatar>

Props

Prop	Type	Default
`class`	`string`	`""`
`size`	`"default" \| "sm" \| "lg"`	`"default"`

Examples

Sizes

SM

MD

LG

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

5
<div class="flex items-center gap-4">
6
  <Avatar size="sm">
7
    <AvatarImage src="https://github.com/bejamas.png" alt="small" />
8
    <AvatarFallback>SM</AvatarFallback>
9
  </Avatar>
10
  <Avatar>
11
    <AvatarImage src="https://github.com/bejamas.png" alt="default" />
12
    <AvatarFallback>MD</AvatarFallback>
13
  </Avatar>
14
  <Avatar size="lg">
15
    <AvatarImage src="https://github.com/bejamas.png" alt="large" />
16
    <AvatarFallback>LG</AvatarFallback>
17
  </Avatar>
18
</div>

Badge

TK

1
---
2
import { Avatar, AvatarBadge, AvatarFallback, AvatarImage } from '@bejamas/ui/components/avatar';
3
---
4

5
<Avatar>
6
  <AvatarImage src="https://github.com/thomkrupa.png" alt="@thomkrupa" />
7
  <AvatarFallback>TK</AvatarFallback>
8
  <AvatarBadge />
9
</Avatar>

Group

WA

BJ

FS

+3

1
---
2
import { Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from '@bejamas/ui/components/avatar';
3
---
4

5
<AvatarGroup>
6
  <Avatar>
7
    <AvatarImage src="https://github.com/withastro.png" alt="@withastro" />
8
    <AvatarFallback>WA</AvatarFallback>
9
  </Avatar>
10
  <Avatar>
11
    <AvatarImage src="https://github.com/bejamas.png" alt="@bejamas" />
12
    <AvatarFallback>BJ</AvatarFallback>
13
  </Avatar>
14
  <Avatar>
15
    <AvatarFallback>FS</AvatarFallback>
16
  </Avatar>
17
  <AvatarGroupCount>+3</AvatarGroupCount>
18
</AvatarGroup>

With `astro:assets` Image

1
---
2
import { Image } from "astro:assets";
3
import profile from "@/assets/profile.jpg";
4
import { Avatar, AvatarImage, AvatarFallback } from "@bejamas/ui/components/avatar";
5
---
6

7
<Avatar>
8
  <AvatarImage>
9
    <Image src={profile} alt="Profile photo" />
10
  </AvatarImage>
11
  <AvatarFallback>PR</AvatarFallback>
12
</Avatar>