Avatar
Customizable Avatar component with animated borders for status indicators like "close friends" or "normal story".
Loading...
Installation
npx shadcn@latest add @scrollxui/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.