Data Display
Forms
Navigation
Avatar
An image element with a fallback for representing the user.
LT
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@/components/ui/avatar";
export default function Particle() {
return (
<Avatar>
<AvatarImage
alt="Luke Tracy"
src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80"
/>
<AvatarFallback>LT</AvatarFallback>
</Avatar>
);
}
Installation
pnpm dlx cnippet@latest add avatar
Usage
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"<Avatar>
<AvatarImage src="/avatars/01.png" alt="User avatar" />
<AvatarFallback>JD</AvatarFallback>
</Avatar>Examples
Different Sizes
AVAVAV
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
export default function Particle() {
return (
<div className="flex items-center gap-4">
<Avatar>
<AvatarImage
alt="User"
src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=96&h=96&dpr=2&q=80"
/>
<AvatarFallback>AV</AvatarFallback>
</Avatar>
<Avatar className="size-12">
<AvatarImage
alt="User"
src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=144&h=144&dpr=2&q=80"
/>
<AvatarFallback>AV</AvatarFallback>
</Avatar>
<Avatar className="size-16">
<AvatarImage
alt="User"
src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=192&h=192&dpr=2&q=80"
/>
<AvatarFallback>AV</AvatarFallback>
</Avatar>
</div>
);
}
Different Radius
AVAVAV
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
export default function Particle() {
return (
<div className="flex items-center gap-4">
<Avatar className="rounded-md">
<AvatarImage
alt="User"
src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80"
/>
<AvatarFallback>AV</AvatarFallback>
</Avatar>
<Avatar className="rounded-xl">
<AvatarImage
alt="User"
src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80"
/>
<AvatarFallback>AV</AvatarFallback>
</Avatar>
<Avatar className="rounded-full">
<AvatarImage
alt="User"
src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80"
/>
<AvatarFallback>AV</AvatarFallback>
</Avatar>
</div>
);
}
Group Avatars
U1U2U3
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
export default function Particle() {
return (
<div className="flex -space-x-[0.6rem]">
<Avatar className="ring-background ring-2">
<AvatarImage
alt="U1"
src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=96&h=96&dpr=2&q=80"
/>
<AvatarFallback>U1</AvatarFallback>
</Avatar>
<Avatar className="ring-background ring-2">
<AvatarImage
alt="U2"
src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=96&h=96&dpr=2&q=80"
/>
<AvatarFallback>U2</AvatarFallback>
</Avatar>
<Avatar className="ring-background ring-2">
<AvatarImage
alt="U3"
src="https://images.unsplash.com/photo-1655874819398-c6dfbec68ac7?w=96&h=96&dpr=2&q=80"
/>
<AvatarFallback>U3</AvatarFallback>
</Avatar>
</div>
);
}