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";
function PersonIcon() {
return (
<svg fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<path
d="M8 8.5c3.85 0 7 2.5 7 4.5a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2c0-2 3.15-4.5 7-4.5M8 10c-1.61 0-3.064.526-4.092 1.234C2.798 12.001 2.5 12.733 2.5 13a.5.5 0 0 0 .5.5h10a.5.5 0 0 0 .5-.5c0-.267-.297-1-1.408-1.766C11.064 10.526 9.609 10 8 10m0-9a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7m0 1.5a2 2 0 1 0 0 4 2 2 0 0 0 0-4"
fill="currentColor"
/>
</svg>
);
}
export default function AvatarFallbackDemo() {
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>
<Avatar.Fallback>JD</Avatar.Fallback>
</Avatar>
<Avatar>
<Avatar.Fallback>
<PersonIcon />
</Avatar.Fallback>
</Avatar>
<Avatar color="accent" variant="soft">
<Avatar.Fallback>GB</Avatar.Fallback>
</Avatar>
</div>
</div>
);
}
export { AvatarFallbackDemo };