GitHub

Go to...

Choose a page to open.

Displays an image that represents a user, with a fallback.

Avatar

avatar-demo

Installation

pnpm dlx shadcn@latest add https://ui.n2020.com/r/avatar.json

Usage

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";
<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="shadcn" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

Examples

Sizes

avatar-sizes

Group

AvatarGroup overlaps its avatars. AvatarGroupCount shows how many more exist.

avatar-stack