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";
const colors = ["accent", "default", "success", "warning", "danger"] as const;
const variants = [
{ label: "letter", type: "letter", content: "AG" },
{ label: "letter soft", type: "letter soft", content: "AG" },
{ label: "icon", type: "icon", content: "icon" },
{ label: "icon soft", type: "icon soft", content: "icon soft" },
{
label: "img",
type: "img",
content: [
"https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/default.png",
"https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/sky.png",
"https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/lavender.png",
"https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/mint.png",
"https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/netflix.png",
],
},
];
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 AvatarVariantsDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
<div className="flex flex-col gap-4">
<div className="flex items-center gap-3">
<div className="w-24 shrink-0" />
{colors.map((color) => (
<div key={color} className="flex w-20 shrink-0 items-center justify-center">
<span className="text-xs capitalize text-zinc-500 dark:text-zinc-400">{color}</span>
</div>
))}
</div>
<div className="h-px bg-zinc-200 dark:bg-zinc-800" />
{variants.map((variant) => (
<div key={variant.label} className="flex items-center gap-3">
<div className="w-24 shrink-0 text-sm text-zinc-500 dark:text-zinc-400">{variant.label}</div>
{colors.map((color, colorIndex) => (
<div key={color} className="flex w-20 shrink-0 items-center justify-center">
<Avatar color={color} variant={variant.type.includes("soft") ? "soft" : undefined}>
{variant.type === "img" ? (
<>
<Avatar.Image
alt={`Avatar ${color}`}
src={Array.isArray(variant.content) ? variant.content[colorIndex] : ""}
/>
<Avatar.Fallback>{color.charAt(0).toUpperCase()}</Avatar.Fallback>
</>
) : variant.type.includes("icon") ? (
<Avatar.Fallback>
<PersonIcon />
</Avatar.Fallback>
) : (
<Avatar.Fallback>{variant.content}</Avatar.Fallback>
)}
</Avatar>
</div>
))}
</div>
))}
</div>
</div>
);
}
export { AvatarVariantsDemo };