Avatar
Customizable Avatar component with animated borders for status indicators like "close friends" or "normal story".
AK
AK
Installation
npx scrollx-ui@latest add avatar
Usage
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
<Avatar variant="close-friends">
<AvatarImage src="https://github.com/Adityakishore0.png" alt="@Ahdeetai" />
<AvatarFallback>AK</AvatarFallback>
</Avatar>
Examples
Default
<Avatar variant="none">
<AvatarImage src="https://github.com/Adityakishore0.png" alt="@Ahdeetai" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
Close Friends
<Avatar variant="close-friends">
<AvatarImage src="https://github.com/Adityakishore0.png" alt="@Ahdeetai" />
<AvatarFallback>AK</AvatarFallback>
</Avatar>
Normal (Instagram style)
<Avatar variant="normal">
<AvatarImage src="https://github.com/Adityakishore0.png" alt="@Ahdeetai" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
API Reference
Avatar
The root container for the Avatar
component.