Avatar
Displays user profile pictures, avatars, or fallback initials, giving users an easy way to identify people throughout the app.
1.1 KB
•Updated on August 21, 2026
LT
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/primitives-avatarUsage
Code
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'Code
<Avatar>
<AvatarImage src="/avatars/01.png" alt="User avatar" />
<AvatarFallback>JD</AvatarFallback>
</Avatar>Features
Sizes
Avatar in multiple size options from xs to xl.
API Reference
Avatar
Root component. Styled wrapper for Avatar.Root from Base UI with default size of 32px (8 units) and rounded-full styling.
AvatarImage
Image element for the avatar. Styled wrapper for Avatar.Image from Base UI.
AvatarFallback
Fallback content displayed when the image fails to load. Styled wrapper for Avatar.Fallback from Base UI with muted background.
Examples
Avatar with customizable offset rings
Avatar with user icon fallback
Avatar with dot indicators.
Avatar with verified badge
Avatar group with overlapping edge
Avatar with notification badge
Related Components
Avatar ExtendedAvatar
Extended avatar components with badges, indicators, and logos.
ViewAvatar GroupAvatar
Avatar group stacking and overlapping system.
ViewMember SelectorAvatar
An interactive participant and member avatar selector with dynamic row layout, animated selection badges, quick-add button, and searchable popover.
View