Avatar
An image with a text fallback, for representing a user.
SC
Installation
npx shadcn@latest add @blank/avatarUsage
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="shadcn" />
<AvatarFallback>SC</AvatarFallback>
</Avatar>Examples
Sizes
BLBLBLBLBLBL
Fallback
Initials sit on a quiet subtle fill, or on solid ink with accent to single out one person, such as the signed-in user. Fallbacks stay monochrome: color is kept for status, as on AvatarBadge.
AMJD
Badge
AMJDKP
Group
AvatarGroup overlaps its avatars and rings each one in the page background; AvatarGroupCount closes the row.
AMJDKP
+4
API Reference
Avatar
Every Radix Avatar.Root prop, plus:
| Prop | Type | Default |
|---|---|---|
size | "xs" | "sm" | "default" | "lg" | "xl" | "2xl" | "default" |
AvatarFallback
Every Radix Avatar.Fallback prop, plus:
| Prop | Type | Default |
|---|---|---|
theme | "subtle" | "accent" | "subtle" |
AvatarBadge
A span. Children render inside the dot (an icon, at lg and up).
| Prop | Type | Default |
|---|---|---|
tone | "success" | "warning" | "info" | "danger" | "success" |
position | "top-right" | "bottom-right" | "top-left" | "bottom-left" | "bottom-right" |
AvatarGroupCount
Takes the same theme as AvatarFallback.