shadcn.io is not affiliated with official shadcn/ui
Shadcn Avatar for React
Displays a user's profile image with fallback.
Installation
bunx --bun shadcn@latest add https://kit.dev/r/aria/avatar.jsonnpx shadcn@latest add https://kit.dev/r/aria/avatar.jsonpnpm dlx shadcn@latest add https://kit.dev/r/aria/avatar.jsonyarn shadcn@latest add https://kit.dev/r/aria/avatar.jsonCopy and paste the following code into your project.
"use client";
import type React from "react";
import { useCallback, useState } from "react";
import { cn } from "@/lib/utils";
export const Avatar = (
props: React.ComponentProps<"div"> & {
size?: "default" | "sm" | "lg";
}
) => {
const { className, size = "default", ...rest } = props;
return (
<div
className={cn(
"cn-avatar group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten",
classNameUpdate the import paths to match your project setup.
Anatomy
Avatar
├── AvatarImage
└── AvatarFallbackUsage
import {
Avatar,
AvatarBadge,
AvatarFallback,
AvatarGroup,
AvatarGroupCount,
AvatarImage,
} from "@/components/ui/avatar";<div className="flex flex-row flex-wrap items-center gap-6 md:gap-12">
<Avatar>
<AvatarImage
alt="@shadcn"
className="grayscale"
height={32}
src="https://github.com/shadcn.png"
width={32}
/>
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage
alt="@evilrabbit"
height={32}
src="https://github.com/evilrabbit.png"
width={32}
/>
<AvatarFallback>ER</AvatarFallback>
<AvatarBadge className="bg-green-600 dark:bg-green-800" />
</Avatar>
<AvatarGroup className="grayscale">
<Avatar>
<AvatarImage
alt="@shadcn"
height={32}
src="https://github.com/shadcn.png"
width={32}
/>
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage
alt="@maxleiter"
height={32}
src="https://github.com/maxleiter.png"
width={32}
/>
<AvatarFallback>LR</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage
alt="@evilrabbit"
height={32}
src="https://github.com/evilrabbit.png"
width={32}
/>
<AvatarFallback>ER</AvatarFallback>
</Avatar>
<AvatarGroupCount>+3</AvatarGroupCount>
</AvatarGroup>
</div>
Demos
Basic
A basic avatar with an image and a fallback.
Badge
Use AvatarBadge to add a badge at the bottom end of the avatar.
Badge Icon
Use an icon inside AvatarBadge.
Group
Use AvatarGroup to stack overlapping avatars.
Group Count
Use AvatarGroupCount to show additional avatars in the group.
Group Count Icon
Use an icon inside AvatarGroupCount.
Size
Use the size prop to change the size of the avatar.
Dropdown
Use the avatar as a trigger for a dropdown menu.
Rtl
Right-to-left avatar. See the RTL configuration guide for document direction.
API Reference
Avatar
PropType
AttributeType
AvatarImage
PropType
AttributeType
AvatarFallback
PropType
AttributeType
AvatarBadge
PropType
AttributeType
AvatarGroup
PropType
AttributeType
AvatarGroupCount
PropType
AttributeType