CN
ERCN
LRER+3
---
import {
Avatar,
AvatarBadge,
AvatarFallback,
AvatarGroup,
AvatarGroupCount,
AvatarImage,
} from "@/components/ui/avatar"
---
<div class="flex flex-row flex-wrap items-center gap-6 md:gap-12">
<Avatar>
<AvatarImage
src="https://github.com/shadcn.png"
alt="@shadcn"
class="grayscale"
/>
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
<AvatarFallback>ER</AvatarFallback>
<AvatarBadge class="bg-green-600 dark:bg-green-800" />
</Avatar>
<AvatarGroup class="grayscale">
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="https://github.com/maxleiter.png" alt="@maxleiter" />
<AvatarFallback>LR</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
<AvatarFallback>ER</AvatarFallback>
</Avatar>
<AvatarGroupCount>+3</AvatarGroupCount>
</AvatarGroup>
</div>Installation
npx shadcn@latest add @fulldev/avatarUsage
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>AvatarImage renders Astro’s Image from astro:assets, so src takes an
imported image or a URL. It renders nothing without src, and AvatarFallback
sits behind the image, so always include it for a missing or broken image.
Composition
Use the following composition to build an Avatar:
Avatar
├── AvatarImage
├── AvatarFallback
└── AvatarBadgeUse the following composition to build an AvatarGroup:
AvatarGroup
├── Avatar
│ ├── AvatarImage
│ ├── AvatarFallback
│ └── AvatarBadge
├── Avatar
│ ├── AvatarImage
│ ├── AvatarFallback
│ └── AvatarBadge
└── AvatarGroupCountBasic
A basic avatar with an image and a fallback.
CN---
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
---
<Avatar>
<AvatarImage
src="https://github.com/shadcn.png"
alt="@shadcn"
class="grayscale"
/>
<AvatarFallback>CN</AvatarFallback>
</Avatar>Badge
AvatarBadge sits at the bottom right of the avatar. Use class for custom
colors, such as bg-green-600 dark:bg-green-800.
CN---
import {
Avatar,
AvatarBadge,
AvatarFallback,
AvatarImage,
} from "@/components/ui/avatar"
---
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
<AvatarBadge class="bg-green-600 dark:bg-green-800" />
</Avatar>Badge with Icon
PP---
import PlusIcon from "@lucide/astro/icons/plus"
import {
Avatar,
AvatarBadge,
AvatarFallback,
AvatarImage,
} from "@/components/ui/avatar"
---
<Avatar class="grayscale">
<AvatarImage src="https://github.com/pranathip.png" alt="@pranathip" />
<AvatarFallback>PP</AvatarFallback>
<AvatarBadge>
<PlusIcon />
</AvatarBadge>
</Avatar>Avatar Group
CNLRER---
import {
Avatar,
AvatarFallback,
AvatarGroup,
AvatarImage,
} from "@/components/ui/avatar"
---
<AvatarGroup class="grayscale">
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="https://github.com/maxleiter.png" alt="@maxleiter" />
<AvatarFallback>LR</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
<AvatarFallback>ER</AvatarFallback>
</Avatar>
</AvatarGroup>Avatar Group Count
Use AvatarGroupCount to add a count to the group.
CNLRER+3
---
import {
Avatar,
AvatarFallback,
AvatarGroup,
AvatarGroupCount,
AvatarImage,
} from "@/components/ui/avatar"
---
<AvatarGroup class="grayscale">
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="https://github.com/maxleiter.png" alt="@maxleiter" />
<AvatarFallback>LR</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
<AvatarFallback>ER</AvatarFallback>
</Avatar>
<AvatarGroupCount>+3</AvatarGroupCount>
</AvatarGroup>Avatar Group with Icon
CNLRER---
import PlusIcon from "@lucide/astro/icons/plus"
import {
Avatar,
AvatarFallback,
AvatarGroup,
AvatarGroupCount,
AvatarImage,
} from "@/components/ui/avatar"
---
<AvatarGroup class="grayscale">
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="https://github.com/maxleiter.png" alt="@maxleiter" />
<AvatarFallback>LR</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
<AvatarFallback>ER</AvatarFallback>
</Avatar>
<AvatarGroupCount>
<PlusIcon />
</AvatarGroupCount>
</AvatarGroup>Sizes
Use the size prop to change the size of the avatar.
CNCNCN---
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
---
<div class="flex flex-wrap items-center gap-2 grayscale">
<Avatar size="sm">
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<Avatar size="lg">
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
</div>Dropdown
Put the Avatar inside a DropdownMenuTrigger styled with buttonVariants.
See Dropdown Menu.
---
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { buttonVariants } from "@/components/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
---
<DropdownMenu>
<DropdownMenuTrigger
class={buttonVariants({
variant: "ghost",
size: "icon",
class: "rounded-full",
})}
>
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
</DropdownMenuTrigger>
<DropdownMenuContent class="w-32">
<DropdownMenuGroup>
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Billing</DropdownMenuItem>
<DropdownMenuItem>Settings</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem variant="destructive">Log out</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>RTL
CNERCNLRER+٣
---
import {
Avatar,
AvatarBadge,
AvatarFallback,
AvatarGroup,
AvatarGroupCount,
AvatarImage,
} from "@/components/ui/avatar"
const translations = {
en: {
dir: "ltr",
values: {
moreUsers: "+3",
},
},
ar: {
dir: "rtl",
values: {
moreUsers: "+٣",
},
},
he: {
dir: "rtl",
values: {
moreUsers: "+3",
},
},
}
const { dir, values: t } = translations.ar
---
<div class="flex flex-row flex-wrap items-center gap-6 md:gap-12" dir={dir}>
<Avatar>
<AvatarImage
src="https://github.com/shadcn.png"
alt="@shadcn"
class="grayscale"
/>
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
<AvatarFallback>ER</AvatarFallback>
<AvatarBadge class="bg-green-600 dark:bg-green-800" />
</Avatar>
<AvatarGroup class="grayscale">
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="https://github.com/maxleiter.png" alt="@maxleiter" />
<AvatarFallback>LR</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
<AvatarFallback>ER</AvatarFallback>
</Avatar>
<AvatarGroupCount>{t.moreUsers}</AvatarGroupCount>
</AvatarGroup>
</div>API Reference
Source: src/components/ui/avatar
Avatar
| Prop | Type | Default |
|---|---|---|
size | "default" | "sm" | "lg" | "default" |
Renders a span with data-size, which AvatarFallback and AvatarBadge read
through group/avatar.
AvatarImage
Accepts the props of Astro’s Image.
| Prop | Type | Default |
|---|---|---|
src | ImageMetadata | string | - |
alt | string | "" |
width | number | 44 |
height | number | 44 |
sizes | string | "44px" |
widths | number[] | [44, 88, 176] |
AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount
These take the attributes of their element (span for AvatarFallback and
AvatarBadge, div for AvatarGroup and AvatarGroupCount) and a class.