Avatar

Customizable Avatar component with animated borders for status indicators like "close friends" or "normal story".

Installation

npx shadcn@latest add https://scrollxui.dev/registry/avatar.json

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.

Props

Property	Type	Default	Description
`variant`	"close-friends" \| "normal" \| "none"	`"none"`	Controls the style variant of the avatar. Used in Avatar.
`src`	string	`—`	Image source URL. Used in AvatarImage.
`alt`	string	`—`	Accessible alt text for the image. Used in AvatarImage.
`children`	ReactNode	`required`	Nested content. Used in Avatar and AvatarFallback.
`className`	string	`—`	Optional styling class. Used in Avatar, AvatarImage, and AvatarFallback.