Skip to main contentSkip to sidebarSkip to headerSkip to footer

Avatar

An image element with a fallback for representing a user or entity.

Installation

Import the component from the passport-ui package.

components/example.tsx
1
import { Avatar, AvatarFallback, AvatarImage } from "passport-ui";

Usage

Basic example showing how to use the component.

components/example.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<Avatar>
  <AvatarImage src="https://placehold.co/32x32" alt="Avatar" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>
 
{/* With fallback when image fails */}
<Avatar>
  <AvatarImage src="" alt="Avatar" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>
 
{/* Stacked avatars */}
<div className="flex -space-x-3">
  <Avatar className="ring-2 ring-border">
    <AvatarImage src="https://placehold.co/32x32" alt="Avatar" />
    <AvatarFallback>JD</AvatarFallback>
  </Avatar>
  <Avatar className="ring-2 ring-border">
    <AvatarImage src="" alt="Avatar" />
    <AvatarFallback>AS</AvatarFallback>
  </Avatar>
</div>

Additional resources

Documentation and examples are available in Storybook.

View in Storybook ↗