Avatar

An image element with a fallback for representing the user.

shadcn/ui docs

Sizes

SMMDLG

With Images

JDMKSA

Active Status

AC
ON
SA

Fallback Initials

KMRL
CCBB

Collective Group

KM
RL
VL
LE
+2

ID Badges

VB
Head RoasterViktor Beansworth
EG
Brew CaptainElena Groundski
KM
Bean CommissarKarl Macchiato

Installation

pnpm dlx shadcn@latest add https://propcore.dev/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

Default

Sizes

SMMDLG

With Images

JDMKSA

Active Status

AC
ON
SA

Fallback Initials

KMRL
CCBB

Collective Group

KM
RL
VL
LE
+2

ID Badges

VB
Head RoasterViktor Beansworth
EG
Brew CaptainElena Groundski
KM
Bean CommissarKarl Macchiato

Fallback

CN