Documentation > Avatars

Avatars

Display user profile pictures or icons

Preview
JD
JS
MB
ED
CJ
SL
DG
OM
EW
JD
JS
MB
ED
CJ
SL
DG
OM
EW
JD
JS
MB
ED
CJ
SL
DG
OM
EW
JD
JS
MB
ED
CJ
SL
DG
OM
EW
Installation
npx radianos add avatar
Props
Prop NameDefault ValuesValues
sizebasexxs, xs, sm, base, lg, xl, 2xl, 3xl, 4xl
showOnlinefalsetrue, false
Syntax
Prop NamePropsDescription
<Avatar>size, showOnlineMain container for the avatar
<AvatarImage>Displays the image inside the avatar
<AvatarFallback>Fallback content when the image is unavailable
Usage
import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
<Avatar size={"xxs"} showOnline>
	<AvatarImage src="/avatar.png"/>
	<AvatarFallback>NK</AvatarFallback>
</Avatar>