Avatar

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

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.

AvatarProps

Props that can be passed to the Avatar component.

• variant - The style variant of the avatar. Can be "close-friends", "normal", or "none" (default).
• className - Optional class name for custom styling of the avatar container.
• children - The content of the avatar (typically AvatarImage and AvatarFallback).

AvatarImage

The image component inside the Avatar container.

AvatarImageProps

• src - The source URL for the avatar image.
• alt - Accessible alt text for the avatar image.
• className - Optional class name for custom styling of the avatar image.

AvatarFallback

A fallback element displayed when the avatar image fails to load.

AvatarFallbackProps

• className - Optional class name for custom styling of the fallback element.
• children - The content of the fallback element (typically initials or an icon).