Avatar

An image element with a fallback for representing the user.

Installation

bash
npx shadcn@latest add avatar

Import

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

With image and fallback

SC

Fallback only

NM

Sizes

SMMDLG

Stacked group

SCLR+4

Props

PROPTYPEDEFAULTDESCRIPTION
srcstring—On AvatarImage — image URL
altstring—On AvatarImage — alt text
delayMsnumber600On AvatarFallback — delay before showing fallback (prevents flash)