Avatar
An image element with a fallback for representing the user.
CN
Installation
npm i @radix-ui/react-avatarUsage
1
2
3
4
5
6
7
8
9
10
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
export function AvatarDemo() {
return (
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
)
}Examples
With Fallback
Initial Fallback
JDCustom Color
ABWith Icon
Different Sizes
Small
SMDefault
MDLarge
LGExtra Large
XLProps
| Component | Props | Description |
|---|---|---|
| Avatar | AvatarPrimitive.AvatarProps | The root component for the avatar. |
| AvatarImage | AvatarPrimitive.AvatarImageProps src: string alt: string | The image displayed in the avatar. |
| AvatarFallback | AvatarPrimitive.AvatarFallbackProps | The fallback element displayed when the image fails to load. |