ui
GitHub

Avatar

Displays an avatar with a fallback.

BB
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 https://9ui.dev/r/avatar.json

Usage

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

Examples

Sizes

BBBBBB
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

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