ui
GitHub

Avatar

Displays an avatar with a fallback.

avatar-demo.tsx
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 
export function AvatarDemo() {
	return (
		<Avatar>
			<AvatarImage src="/avatars/bora.png" alt="User" />
			<AvatarFallback>BB</AvatarFallback>
		</Avatar>
	)
}

Installation

npx shadcn@latest add @9ui/avatar

Usage

Imports
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
Anatomy
<Avatar>
	<AvatarImage />
	<AvatarFallback />
</Avatar>

Examples

Sizes

avatar-sizes.tsx
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 
export function AvatarSizes() {
	return (
		<div className="flex flex-row items-center gap-4">
			<Avatar size="sm">
				<AvatarImage src="/avatars/bora.png" alt="User" />
				<AvatarFallback>BB</AvatarFallback>
			</Avatar>
			<Avatar size="md">
				<AvatarImage src="/avatars/bora.png" alt="User" />
				<AvatarFallback>BB</AvatarFallback>
			</Avatar>
			<Avatar size="lg">
				<AvatarImage src="/avatars/bora.png" alt="User" />
				<AvatarFallback>BB</AvatarFallback>
			</Avatar>
		</div>
	)
}

With Fallback

avatar-fallback.tsx
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
 
export function AvatarWithFallback() {
	return (
		<Avatar>
			<AvatarFallback>BB</AvatarFallback>
		</Avatar>
	)
}

Avatar Group

avatar-group.tsx
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 
export function AvatarGroup() {
	return (
		<div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-[3px]">
			<Avatar>
				<AvatarImage src="/avatars/memoji-1.png" alt="person-1" />
				<AvatarFallback>P1</AvatarFallback>
			</Avatar>
			<Avatar>
				<AvatarImage src="/avatars/memoji-2.png" alt="person-2" />
				<AvatarFallback>P2</AvatarFallback>
			</Avatar>
			<Avatar>
				<AvatarImage src="/avatars/memoji-3.png" alt="person-3" />
				<AvatarFallback>P3</AvatarFallback>
			</Avatar>
		</div>
	)
}