Avatar

An image element with a fallback for representing the user.

Basic Avatar

CNVCJD

Sizes

Use Tailwind classes to adjust the size.

SMMDLGXL

With Status Indicator

Avatar Group

CNVCJD+3

Usage

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

<Avatar>
  <AvatarImage src="https://github.com/user.png" alt="@user" />
  <AvatarFallback>UN</AvatarFallback>
</Avatar>

{/* Custom size */}
<Avatar className="h-14 w-14">
  <AvatarFallback>LG</AvatarFallback>
</Avatar>

{/* With status */}
<div className="relative">
  <Avatar>
    <AvatarFallback>JD</AvatarFallback>
  </Avatar>
  <span className="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-green-500 ring-2 ring-background" />
</div>

Date Picker

Badge