Avatar

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

AK
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.

Props

PropertyTypeDefaultDescription
variant"close-friends" | "normal" | "none""none"
Controls the style variant of the avatar. Used in Avatar.
srcstring
Image source URL. Used in AvatarImage.
altstring
Accessible alt text for the image. Used in AvatarImage.
childrenReactNoderequired
Nested content. Used in Avatar and AvatarFallback.
classNamestring
Optional styling class. Used in Avatar, AvatarImage, and AvatarFallback.

Built withby Ahdeetai.