Reddot UI Library

Docs
Avatar

Avatar

An image element with a fallback for representing the user.

SourceApi

Installation

$npx shadcn@latest add https://reddot.dottools.xyz/r/avatar.json

Usage

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"
<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

Examples

Basic Avatar

Fallback

When the image fails to load or is not provided, the fallback will be displayed.

<Avatar>
  <AvatarImage src="https://broken-link.png" alt="@shadcn" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

Custom Shapes

You can customize the avatar shape using Tailwind CSS classes.

<Avatar className="rounded-lg">
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

References