Components
Loading preview...
Display user profile images with customizable fallback content.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-avatarimport { Avatar } from "@/components/ui/heroui-avatar";
export default function AvatarCustomStylesDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
<div className="flex items-center gap-4">
<Avatar className="size-16">
<Avatar.Image
alt="Extra Large"
src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/blue.jpg"
/>
<Avatar.Fallback>XL</Avatar.Fallback>
</Avatar>
<Avatar className="rounded-lg">
<Avatar.Image
alt="Square Avatar"
src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/purple.jpg"
/>
<Avatar.Fallback>SQ</Avatar.Fallback>
</Avatar>
<Avatar className="bg-gradient-to-tr from-pink-500 to-yellow-500 p-0.5">
<div className="size-full rounded-full bg-background p-0.5">
<Avatar.Image
alt="Gradient Border"
className="rounded-full"
src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/red.jpg"
/>
</div>
<Avatar.Fallback>GB</Avatar.Fallback>
</Avatar>
<div className="relative">
<Avatar>
<Avatar.Image
alt="Online User"
src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg"
/>
<Avatar.Fallback>ON</Avatar.Fallback>
</Avatar>
<span className="absolute right-0 bottom-0 size-3 rounded-full border-2 border-background bg-emerald-500" />
</div>
</div>
</div>
);
}
export { AvatarCustomStylesDemo };